CSS isimlendirme kuralı (naming conventions)

CSS (Cascading Style Sheets) adlı dilin isimlendirme kuralları tasarım ve biçimlendirme kodlarını düzenlemek için kullanılır. Bu dil, web sayfalarının görünümünü değiştirmek için HTML veya XML dosyaları ile birlikte kullanılır.

CSS'de, isimlendirme kuralları oluşturulan nesnelerin tanımlanmasında ve düzenlenmesinde yardımcı olur. Örneğin, bir sayfanın başlık bölümünün arka plan rengini değiştirmek için "başlık" adını verilen bir nesne oluşturulur ve bu nesne için arka plan rengi belirlenir.

CSS'te, isimlendirme kurallarının izlenmesi önemlidir. Örneğin, isimler küçük harflerle yazılmalı, boşluk kullanılmamalı ve geçerli CSS değişkenlerinden farklı olmalıdır. Ayrıca, isimler kısaltılmamalı ve anlaşılabilir bir dil kullanılmalıdır. Bu şekilde, kodun okunabilirliği ve anlaşılabilirliği artar.

1. CSS dosyalarının isimleri, kelimeleri küçük harflerle yazın ve kelimeleri nokta (.) ile ayırın. Örneğin: "stil-kurallari.css"
2. CSS sınıflarının isimlerini, kelimeleri küçük harflerle yazın ve kelimeleri tire (-) ile ayırın. Örneğin: "sol-menu"
3. CSS özelliklerinin isimlerini, kelimeleri küçük harflerle yazın ve kelimeleri tire (-) ile ayırın. Örneğin: "font-size"
4. İsimler, anlamlı olmalıdır. Örneğin, "kirmizi-buton" gibi.

CSS BEM (Block-Element-Modifier) isimlendirme konvansiyonu

Temel bilgileri geçtikten sonra biraz daha derine inelim. Bu, web sayfasındaki bileşenleri isimlendirmede kullanılan bir yöntemdir. Bu yöntem, bileşenleri daha anlaşılır ve kolayca yönetilebilir hale getirmek için kullanılır. BEM konvansiyonu, bir bileşenin ismini oluşturmak için üç parçadan oluşur: blok, element ve değiştirici. Örnekler vermek gerekirse:

• header: Bir web sayfasının başlığını temsil eden bir bloktur.
• header__title: header blok içinde bulunan bir elementtir.
• header__title--primary: header__title elementine bir değiştirici uygulanmıştır.

Bu örnekler, BEM konvansiyonunun nasıl uygulandığını göstermektedir. BEM konvansiyonuna uyarak, isimler daha anlamlı ve kolayca yönetilebilir hale getirilir. Ayrıca, bu yöntem sayesinde CSS kodları arasında karmaşıklık azaltılır ve kod okunabilirliği artar.