Yük Hızını Artırmak için Çoklu CSS Seçici Grubu
Verimlilik başarılı bir web sitesinde önemli bir faktördür. Bu site görüntüleri çevrimiçi olarak nasıl kullandığı konusunda etkili olmalı. Bu, sitenin ziyaretçiler için iyi performans göstermesini ve cihazlarında hızlı bir şekilde yüklenmesini sağlamaya yardımcı olur. Verimlilik, genel sürecinizin bir parçası olmalı ve bir sitenin ilerlemesini zamanında ve bütçede tutmanıza yardımcı olacaktır.
Sonuç olarak, verimlilik, bir sitenin oluşturulmasının ve uzun vadedeki başarısının her alanında, o sitenin CSS sayfaları için yazılan stiller de dahil olmak üzere bir rol oynar. Daha yalın, daha temiz CSS dosyaları oluşturabilmek idealdir ve bunu başarabilmenin yollarından biri, birden çok CSS seçiciyi bir araya getirmektir.
Grup Seçici
CSS seçicilerini gruplandırırken, stil stilinizdeki stilleri tekrar etmeden aynı stilleri birkaç farklı öğeye uygularsınız. İki veya üç veya daha fazla CSS kuralına sahip olmak yerine, hepsi aynı şeyi yapar (örneğin, bir şeyin rengini kırmızıya ayarlar), sayfanız için tek bir CSS kuralına sahip olursunuz.
Bu "seçmen gruplandırması" nın bir sayfaya nasıl yarar sağlamasının birkaç nedeni vardır. İlk olarak, stil sayfanız daha küçük olacak ve daha hızlı yüklenecek. Kuşkusuz, yavaş yükleme siteleri söz konusu olduğunda, stil sayfaları ana suçlamalardan biri değildir. CSS dosyaları metin dosyalarıdır, bu nedenle gerçekten uzun CSS sayfaları bile, iyi olmayan resimlerle karşılaştırıldığında, dosya boyutu açısından küçüktür. Yine de, her küçük sayı önemlidir ve eğer CSS'nizin bir kısmını tıraş edip sayfaları daha hızlı yüklerseniz, bu her zaman yapılması gereken bir şeydir.
Genel olarak, sitelerin ortalama yük hızları 3 saniyeden azdır; 3 ila 7 saniye, ortalamaya yakındır ve 7 saniyeden fazla, sadece çok yavaştır. Bu düşük rakamlar, sitenizde bunları elde etmek için yapabileceğiniz her şeyi yapmanız gerektiği anlamına gelir! Bu nedenle, gruplandırılmış CSS seçicilerini kullanarak sitenizi hızlandırmaya yardımcı olabilirsiniz.
CSS Seçici Nasıl Gruplanır
Stil sayfanızda CSS seçicilerini bir arada gruplandırmak için, birden çok gruplu seçiciyi stilde ayırmak için virgül kullanabilirsiniz . Aşağıdaki örnekte, stil p ve div öğelerini etkiler:
div, p {color: # f00; }Virgül temelde "ve" anlamına gelir. Dolayısıyla bu seçici tüm paragraf öğeleri ve tüm bölüm öğeleri için geçerlidir. Virgül eksikse, bunun yerine bir bölümün çocuğu olan tüm paragraf öğeleri olur. Bu çok farklı bir seçenektir, bu yüzden bu virgül gerçekten seçmenin anlamını değiştirir!
Herhangi bir seçici, başka bir seçici ile gruplanabilir. Bu örnekte, bir sınıf seçici bir kimlik seçici ile gruplandırılmıştır:
p.red, #sub {color: # f00; }Bu stil, "red" sınıf özniteliği olan herhangi bir paragrafa ve "sub" ID özniteliğine sahip herhangi bir öğeye (hangi tür belirtmediğimizden beri) uygulanır.
Tek sözcükler ve tamamlayıcı seçiciler de dahil olmak üzere, herhangi bir sayı seçiciyi birlikte gruplayabilirsiniz. Bu örnek dört farklı seçiciyi içerir:
p, .red, #sub, div a: link {color: # f00; }Yani bu CSS kuralı aşağıdakilere uygulanacaktır:
- Herhangi bir paragraf elemanı
- "Kırmızı" sınıfı ile herhangi bir öğe
- "Alt" kimliğine sahip herhangi bir öğe
- Bir bölümün ifadeleri olan bağlantı elemanlarının "bağlantı" sözde sınıfı.
Bu son seçici bir bileşik seçici. Bu CSS kuralındaki diğer seçiciler ile kolayca birleştirildiğini görebilirsiniz. Bu kural ile, bu 4 seçicide # f00 (kırmızı olan) rengini ayarlıyoruz; bu, aynı sonucu elde etmek için 4 ayrı seçicinin yazılması tercih edilir.
Grup seçicilerin bir başka yararı da, eğer bir değişiklik yapmanız gerekiyorsa, birden çok yerine bir tek CSS kuralı düzenleyebilirsiniz. Bu, bu yaklaşımın gelecekte siteyi korumak söz konusu olduğunda size sayfa ağırlığı ve zaman kazandırdığı anlamına gelir.
Herhangi bir seçici gruplanabilir
Yukarıdaki örneklerden de görebileceğiniz gibi, herhangi bir geçerli seçici bir gruba yerleştirilebilir ve belgede tüm gruplanmış öğelere uyan tüm öğeler bu stil özelliğine göre aynı stile sahip olacaktır.
Bazı insanlar gruplandırılmış öğeleri kodda okunabilirlik için ayrı satırlarda listelemeyi tercih ederler. Web sitesindeki görünüm ve yükleme hızı aynı kalır. Örneğin, virgülle ayrılmış stilleri tek bir kod satırında bir stil özelliğine birleştirebilirsiniz:
th, td, p.red, div # firstred {renk: kırmızı; }
veya açıklık için stilleri tek tek satırlarda listeleyebilirsiniz:
inci,
td,
p.red,
div # firstred
{
kırmızı renk;
}
Birden çok CSS seçiciyi gruplamak için kullandığınız yöntem, sitenizi hızlandırır ve stilleri uzun vadede yönetmeyi kolaylaştırır.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 5/8/17 tarihinde düzenlenmiştir.