Bir Angular Kendo Uygulaması oluşturuyorum.
Tek sayfalık bir uygulama oluşturmayı planlıyorum.
Tüm giriş bilgilerini birden çok sayfaya bölmek istiyorum.
Her sayfa için farklı JavaScript, CSS ve HTML dosyaları.
Bu html dosyalarını kullanıcı etkileşimlerine göre dinamik olarak yüklüyorum.Tek sayfa uygulaması ile birden fazla css dosyası, nasıl css dosyaları bölmek için?
Tek sayfa mimarisine göre, tüm sayfaları dinamik olarak yüklediğimiz ana sayfaya tüm JavaScript ve CSS dosyalarını eklememiz gerekir.
Sorularım, her ekran için CSS stillerini nasıl bölebilirim.
Her ekran için farklı sınıf/kimlik adlarına sahip olmam gerekiyor mu?
Aşağıdaki gibi bir şey yapabilir miyim?
// Page1.html
<div id="myPage1">
<div class="something">Page</div>
</div>
// Page1.css
#myPage1 .something { color: black; }
// Page2.html
<div id="myPage2">
<div class="something">Page</div>
</div>
// Page2.css
#myPage2 .something { color: blue; }
Yani Page1.css ve Page2.css ana düzeninde tek seferde yüklenecektir.
Page2.html yüklediğimde Page2.css stil uygulanmaktadır.
Doğru yol hangisidir?
Farklı seçiciler olduklarından, aynı dosyada bulunup bulunmamaları gerçekten önemli değil. Genel olarak css'nizi birleştirip dağıtımdan önce minimumu birleştirirsiniz, bu yüzden sadece bir kez daha küçük bir css dosyası yüklenmelidir. Geliştirme sırasında, sizi hiçbir şeyden ayırmak için hiçbir şey sizi durdurmuyor :) – Icepickle
Eğer açısal 1.5 kullanmıyorsanız, iyi bir yol yoktur. (Yani, css'de bileşen adı olarak kullanabilirsiniz) Sınıfları kullanmayı tercih ediyorum (class = "page1"), ancak sayfayı belirlemek için kimlikleri kullanabilirsiniz. Ya da tüm eleman sınıflarını 'page1-input' gibi farklı yapabilirsiniz. Gerçekten önemli değil. –