CSS seçicilerini grupladığınızda, stil sayfanızdaki stilleri tekrar etmeden aynı stilleri birkaç farklı öğeye uygularsınız. Aynı şeyi yapan iki, üç veya daha fazla CSS kuralına (örneğin bir şeyin rengini kırmızıya ayarlayın) sahip olmak yerine, aynı şeyi gerçekleştiren tek bir CSS kuralı kullanırsınız. Bu verimliliği artıran taktiğin sırrı virgüldür.
CSS Seçicileri Nasıl Gruplandırılır
CSS seçicilerini bir stil sayfasında gruplamak için, birden çok gruplanmış seçiciyi ayırmak için virgül kullanın tarzında. Bu örnekte, stil p ve div öğelerini etkiler:
div, p { renk: #f00; }
Bu bağlamda virgül "ve" anlamına gelir, dolayısıyla bu seçici tüm paragraf öğelerine ve tüm bölme öğelerine uygulanır. Virgül eksikse, seçici bunun yerine bir bölümün alt öğesi olan tüm paragraf öğelerine uygulanır. Bu farklı türde bir seçicidir, bu nedenle virgül önemlidir.
Herhangi bir seçiciyi başka bir seçiciyle gruplayabilirsiniz. Bu örnek, bir sınıf seçiciyi bir kimlik seçiciyle gruplandırır:
p.kırmızı, #sub { renk: #f00; }
Bu stil, class özniteliğine sahip herhangi bir paragraf için geçerlidir. kırmızı ve ID özniteliği olan herhangi bir öğe (tür belirtilmediği için) alt.
Tek sözcükten oluşan seçiciler ve bileşik seçiciler dahil olmak üzere istediğiniz sayıda seçiciyi gruplayabilirsiniz. Bu örnek dört farklı seçici içerir:
p, .red, #sub, div a: link { color: #f00; }
Bu CSS kuralı şunlara uygulanır:
- Herhangi bir paragraf öğesi
- sınıfına sahip herhangi bir eleman kırmızı
- Kimliği olan herhangi bir öğe alt
- bağlantı bir bölümün torunları olan bağlantı elemanlarının sözde sınıfı.
Bu son seçici bir bileşik seçicidir. Gösterildiği gibi, bu CSS kuralındaki diğer seçicilerle kolayca birleştirilebilir. Kural rengini belirler #f00 (kırmızı) aynı sonucu elde etmek için dört ayrı seçici yazmaktan daha çok tercih edilen bu dört seçicide.
Herhangi Bir Seçici Gruplandırılabilir
Herhangi bir geçerli seçiciyi bir gruba yerleştirebilirsiniz ve belgedeki gruplanmış tüm öğelerle eşleşen tüm öğeler, bu stil özelliğine dayalı olarak aynı stile sahip olacaktır.
Bazı tasarımcılar aşağıdakileri listelemeyi tercih eder: gruplandırılmış elemanlar kodda okunabilirlik için ayrı satırlarda. 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 tek bir stil özelliğinde birleştirebilirsiniz:
th, td, p.red, div#firstred { color: red; }
veya netlik için stilleri tek tek satırlarda listeleyebilirsiniz:
inci,
td,
p.kırmızı,
div#firstred
{
kırmızı renk;
}
Neden Grup CSS Seçicileri?
CSS seçicilerini gruplamak, stil sayfanızın boyutunu en aza indirmeye yardımcı olur, böylece daha hızlı yüklenir. Kuşkusuz, yavaş yüklemede ana suçlu stil sayfaları değildir; CSS dosyaları metin dosyalarıdır, bu nedenle çok uzun CSS sayfaları bile optimize edilmemiş resimlerle karşılaştırıldığında çok küçüktür. Yine de, her bir optimizasyon yardımcı olur ve CSS'nizden biraz küçültebilir ve sayfaları çok daha hızlı yükleyebilirseniz, bu iyi bir şeydir.
Gruplama seçicileri ayrıca site bakımını çok daha kolay hale getirir. Bir değişiklik yapmanız gerekiyorsa, birden çok kural yerine tek bir CSS kuralını düzenleyebilirsiniz. Bu yaklaşım zamandan ve zahmetten tasarruf sağlar.
Sonuç olarak: CSS seçicilerini gruplamak verimliliği, üretkenliği, organizasyonu ve hatta bazı durumlarda yükleme hızını artırır.