CSS veya Basamaklı Stil Şablonu, web tasarım endüstrisinin bir siteye görsel stiller eklemenin kabul edilen yoludur. CSS ile sayfa düzenini, renkleri, tipografi, arka plan resmi ve çok daha fazlası. Temel olarak, görsel bir stilse, CSS bu stilleri web sitenize getirmenin yoludur.
Bir belgeye CSS stilleri ekledikçe, belgenin uzamaya başladığını fark edebilirsiniz. Sadece bir avuç sayfası olan küçük bir site bile oldukça büyük bir CSS dosyasına sahip olabilir - ve çok sayıda benzersiz içeriğe sahip çok büyük bir sitede çok büyük CSS dosyaları olabilir. Bu bileşik duyarlı siteler çok olan medya sorguları görsellerin nasıl göründüğünü ve sayfanın farklı ekranlar için nasıl düzenlendiğini değiştirmek için stil sayfalarına dahil edilmiştir.
Evet, CSS dosyaları uzayabilir. söz konusu olduğunda bu büyük bir sorun değil site performansı ve indirme hızı, çünkü uzun bir CSS dosyası bile oldukça küçük olabilir (çünkü gerçekten sadece bir metin belgesidir). Yine de, sayfa hızı söz konusu olduğunda her küçük şey önemlidir, bu nedenle stil sayfanızı daha yalın hale getirebilirseniz, bu iyi bir fikirdir. Stil sayfanızda "virgül"ün çok kullanışlı olabileceği yer burasıdır!
Virgüller ve CSS
CSS seçici sözdiziminde virgülün oynadığı rolü merak etmiş olabilirsiniz. Cümlelerde olduğu gibi, virgül, ayırıcılara kod değil, netlik getirir. virgül bir CSS seçici ayırır çoklu seçiciler aynı stiller içinde.
Örneğin, aşağıdaki bazı CSS'lere bakalım.
th { renk: kırmızı; }
td { renk: kırmızı; }
p.kırmızı { renk: kırmızı; }
div#firstred { renk: kırmızı; }
Bu sözdizimi ile istediğinizi söylüyorsunuz inci etiketler, td etiketler, kırmızı sınıfa sahip paragraf etiketleri ve ilk kırmızı kimliğe sahip div etiketi, stil renginin kırmızı olması için.
Bu tamamen kabul edilebilir bir CSS'dir, ancak bu şekilde yazmanın iki önemli dezavantajı vardır:
- Gelecekte, değiştirmeye karar verirseniz yazı rengi bu özelliklerden maviye dönüşüyorsa, stil sayfanızda bu değişikliği dört kez yapmanız gerekir.
- Stil sayfanıza ihtiyacınız olmayan birçok ekstra karakter ekler. Bu 4 stil abartılı görünmeyebilir, ancak bunu stil sayfanızın tamamında yapmaya devam ederseniz, çizgiler toplanır ve bu sayfa olması gerekenden çok, çok daha büyük olur.
Bu dezavantajlardan kaçınmak ve CSS dosyanızı düzene sokmak için virgül kullanmayı deneyeceğiz.
Seçicileri Ayırmak için Virgül Kullanmak
4 ayrı CSS seçici ve 4 kural yazmak yerine, birleştirmek tek tek seçicileri virgülle ayırarak tüm bu stilleri tek bir kural özelliğinde toplayın. İşte bunun nasıl yapılacağı:
th, td, p.red, div#firstred { color: red; }
Virgül karakteri temel olarak seçicinin içindeki "veya" kelimesi gibi davranır. Yani bu geçerli inci etiketler VEYA td etiketler VEYA paragraf etiketleri red sınıfıyla VEYA ilk kırmızı kimliğine sahip div etiketiyle. Bu tam olarak daha önce sahip olduğumuz şeydi, ancak 4 CSS kuralına ihtiyaç duymak yerine birden fazla seçiciye sahip tek bir kuralımız var. Bu, seçicide virgülün 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ı oluşturmakla kalmaz, aynı zamanda gelecekteki güncellemeleri çok daha kolay hale getirir. Şimdi, rengi kırmızıdan maviye değiştirmek istiyorsanız, değişikliği bizim sahip olduğumuz orijinal 4 stil kuralı yerine tek bir yerde yapmanız yeterli! Tüm bir CSS dosyasındaki bu zaman tasarruflarını düşünün ve bunun uzun vadede size hem zamandan hem de yerden nasıl tasarruf sağlayacağını görebilirsiniz!
Sözdizimi Varyasyonu
Bazı kişiler yukarıdaki gibi hepsini tek satıra yazmak yerine her seçiciyi kendi satırında ayırarak CSS'yi daha okunaklı hale getirmeyi tercih ediyor. Bu şu şekilde yapılacaktı:
inci,
td,
p.kırmızı,
div#firstred
{
kırmızı renk;
}
Her seçiciden sonra bir virgül koyduğunuza ve ardından bir sonraki seçiciyi kendi satırına bölmek için "enter" kullandığınıza dikkat edin. Son seçiciden sonra virgül EKLEMEZSİNİZ.
Seçicileriniz arasında virgül kullanarak daha fazla kompakt stil sayfası gelecekte güncellemek daha kolay ve bugün okumak daha kolay!