Neden basit bir virgül kodlamayı basitleştirir?
CSS veya Basamaklı Stil Sayfaları, web tasarım endüstrisinin bir siteye görsel stiller eklemenin kabul edilen yoludur. CSS ile sayfa düzenini, renkleri, tipografisini , arka plan resmini ve daha fazlasını kontrol edebilirsiniz. Temel olarak, görsel bir stilse, CSS bu stilleri web sitenize getirmenin yoludur.
Belgeye CSS stilleri ekledikçe, belgenin daha uzun ve daha uzun sürmeye başladığını görebilirsiniz. Sadece bir avuç dolusu sayfa içeren küçük bir site bile büyük bir CSS dosyasıyla sonuçlanabilir ve çok sayıda ve çok sayıda benzersiz içeriğe sahip çok büyük bir site çok büyük CSS dosyalarına sahip olabilir. Bu, görsellerin nasıl göründüğünü ve sayfanın farklı ekranlar için nasıl görüneceğini değiştirmek için stil sayfalarında bulunan birçok medya sorgusuna sahip duyarlı siteler tarafından birleştirilir.
Evet, CSS dosyaları uzun sürebilir. Site performansı ve indirme hızı söz konusu olduğunda bu önemli bir sorun değildir, çünkü uzun bir CSS dosyasının bile oldukça küçük olması muhtemeldir (çünkü bu sadece bir metin belgesidir). Yine de, sayfa hızı söz konusu olduğunda her küçük sayı önemlidir, bu yüzden stil sayfanızı daha da zayıflatabilirseniz, bu iyi bir fikirdir. Bu "virgül" tarzı sayfanızda çok kullanışlı gelebilir!
Virgül ve CSS
CSS seçici sözdiziminde virgülün hangi rolü oynadığını merak etmiş olabilirsiniz. Cümlelerde olduğu gibi, virgül ayırıcılara açıklık getiriyor (kod değil). Bir CSS seçicideki virgül, aynı stiller içinde çoklu seçicileri ayırır.
Örneğin, aşağıdaki bazı CSS’lere bakalım.
th {color: kırmızı; }
td {color: kırmızı; }
p.red {color: kırmızı; }
div # firstred {color: red; }
Bu sözdizimi ile, th etiketlerini, td etiketlerini, kırmızı etiketli paragraf etiketlerini ve stil renginin kırmızı olmasını sağlamak için ID ile birlikte div etiketini istediğinizi söylüyorsunuz.
Bu kesinlikle kabul edilebilir bir CSS'dir, ancak bu şekilde yazmanın iki önemli dezavantajı vardır:
- Gelecekte, bu özelliklerin yazı tipi rengini mavi olarak değiştirmeye karar verirseniz, bu değişikliği stil sayfanızda dört kez yapmanız gerekir.
- Stil sayfanıza ihtiyacınız olmayan çok fazla karakter ekler. Bu 4 stil çok fazla görünmeyebilir, ancak bunu tüm stil sayfanızda yapmaya devam ederseniz, satırlar eklenecek ve bu sayfa olması gerekenden çok daha büyük olacaktır.
Bu dezavantajları önlemek ve CSS dosyanızı düzenlemek için virgül kullanmayı deneyeceğiz.
Ayırıcıları Ayırmak için Virgül Kullanma
4 ayrı CSS seçicisi ve 4 kural yazmak yerine, tek tek seçicileri virgülle ayırarak tüm bu stilleri tek bir kural özelliğiyle birleştirebilirsiniz. Bunun nasıl yapılacağı şöyle:
th, td, p.red, div # firstred {renk: kırmızı; }
Virgül karakter, temel olarak, seçicinin içinde "ve" kelimesi olarak işlev görür. Bu durum, t etiketleriyle AND td etiketleri VE kırmızı ile yazılmış paragraf etiketlerini ve ilk olarak ID ile div etiketini uygular. Tam olarak daha önce sahip olduğumuz şey buydu, ancak 4 CSS kuralına ihtiyaç duymak yerine, çoklu seçicilere sahip tek bir kuralımız var. Bu, virgülün seçicide yaptığı şeydir, bir kuralda birden fazla seçiciye sahip olmamızı sağlar.
Bu yaklaşım yalnızca daha yalın, daha temiz CSS dosyaları yapmakla kalmaz, aynı zamanda gelecekteki güncellemeleri de daha kolay hale getirir. Şimdi, rengi kırmızıdan maviye değiştirmek isterseniz, yaptığınız orijinal 4 tarzı kurallar yerine yalnızca bir yerde değişikliği yapmanız gerekir! Tüm CSS dosyasında bu zaman tasarrufu hakkında düşünün ve uzun vadede hem zaman hem de yer tasarrufu sağlayacağını görebilirsiniz!
Sözdizimi Değişimi
Bazı insanlar, her seçiciyi yukarıdaki gibi bir satır üzerine yazmak yerine, her seçiciyi kendi satırında ayırarak CSS'yi daha okunabilir yapmayı seçer. Bu nasıl yapılmalı?
inci,
td,
p.red,
div # firstred
{
kırmızı renk;
}
Her bir seçiciden sonra virgül koyduğunuzu ve sonra bir sonraki seçiciyi kendi satırına kırmak için "enter" yazdığınızı unutmayın. Son seçiciden sonra virgül eklemezsiniz.
Seçicileriniz arasındaki virgülleri kullanarak, gelecekte güncellenmesi daha kolay olan ve bugün daha kolay okunan daha kompakt bir stil sayfası oluşturursunuz!
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 5/8/17 tarihinde düzenlenmiştir.