CSS’de “Specificity” (Özgüllük) Kavramı
CSS jargonunda “specificity” (özgüllük), bir stil kuralının elementlere nasıl uygulanacağını belirlerken kullanılan bir “öncelik” sırasını ifade eder. Yani demem o ki, yeri geldiğinde birden fazla stil kuralının aynı elemente uygulandığı durumlarla karşılaşacaksınız. Dolayısıyla hangi stilin öncelik kazanacağını belirlemek için bu kavramı iyi bir şekilde anlamaya mecburuz.
Özgüllük değeri, bir stil kuralının “ne kadar özgül” olduğunu belirtmeye yarar. Bu belirtme ise daha yüksek bir “specifcity” değerine sahip kuralların daha düşük “specifcity” değerine sahip kurallara baskın olma ile alakalıdır. Tabiri caizse aynı stillemede baskın olan küçük olanı ezer. Bu yüzden, stilize ederken hangi CSS seçicileri kullanacağımıza bu yönde bir karar vermeliyiz.
Aşağıdaki tabloda CSS seçicileri ve sahip oldukları “specificity“ değerleri gösterilmiştir. Bu sayede baskınlığı ayarlayabiliriz:
| Seçici Tipi | Specificity Değeri |
|---|---|
| Satır İçi Stiller | 1000 |
| ID Seçiciler | 100 |
| Sınıf Seçicileri | 10 |
| Element Seçicileri | 1 |
| Evrensel Seçici | 0 |
| Pseudo-class | 10 |
| Pseudo-element | 1 |
| Nitelik Seçicisi | 10 |
Yukarıdaki tabloda, stilleme yaparken kullandığımız seçici tiplerinin sahip olduğu “specifity” değerleri gösterilmiştir. Daha yüksek specificity değerine sahip bir seçici, daha düşük değerli bir seçiciyi geçersiz kılar. Örnek üzerinden gösterelim:
<!DOCTYPE html>
<html>
<head>
<style>
/* Element seçicisi - specificity: 1 */
p {
color: blue;
}
/* Class seçicisi - specificity: 10 */
.highlight {
color: green;
}
/* ID seçicisi - specificity: 100 */
#important {
color: red;
}
</style>
</head>
<body>
<p id="important" class="highlight">Bu bir test cümlesidir.</p>
</body>
</html>
Bu örnekte p elementine üç farklı seçici uygulanmıştır:
p { color: blue; }(specificity: 1).highlight { color: green; }(specificity: 10)#important { color: red; }(specificity: 100)
“Specificity” sıralamasına göre en yüksek değerli olan ID seçicisi #important, color: red; stilini uygular. Bu nedenle, cümle kırmızı renkte görünür.
“Specificity” değeri, bir CSS seçicisinin içinde kullanılan farklı türdeki seçicilerin toplamına dayanarak hesaplanır. Bir seçicinin özgüllük değeri, ID seçicilerinin, sınıf ve pseudo-class seçicilerinin, nitelik seçicilerinin, element ve pseudo-element seçicilerinin sayısına göre belirlenir. Örneğin, #header .menu-item a seçicisi için önce ID seçicisi olan #header 100 puan, sınıf seçicisi olan .menu-item 10 puan ve element seçicisi olan a 1 puan getirir. Bu seçicinin toplam specificity değeri 111 olur. Benzer şekilde, h1:hover seçicisinde element seçicisi h1 bir puan ve pseudo-class olan :hover 10 puan sağlar, bu da toplamda 11 puan yapar. Görüldüğü gibi, bir seçicinin specificity değeri, içinde kullanılan seçicilerin türü ve sayısına bağlı olarak hesaplanır ve bu değer, bir stil kuralının uygulanmasında önceliği belirler. Bir başka örneği inceleyelim:
<!DOCTYPE html>
<html>
<head>
<style>
/* Element seçicisi - Specificity: 1 */
h1 {
font-size: 20px;
color: blue;
}
/* Sınıf seçicisi - Specificity: 10 */
.highlight {
color: green;
}
/* ID seçicisi - Specificity: 100 */
#special-heading {
color: red;
}
/* ID + sınıf kombinasyonu - Specificity: 110 */
#special-heading.highlight {
color: orange;
}
</style>
</head>
<body>
<!-- Birden fazla stil uygulanıyor -->
<h1 id="special-heading" class="highlight">Bu bir başlıktır</h1>
</body>
</html>
Bu örnekte, aynı h1 elementine dört farklı stil uygulanıyor ve her birinin “specificity” değeri şu şekilde hesaplanmıştır:
h1 { color: blue; }:
Element seçicisi, sadece 1 puanlık specificity değeri taşır. Bu yüzden önceliği en düşüktür..highlight { color: green; }:
Sınıf seçicisi 10 puanlık specificity değerine sahiptir ve element seçicisini geçersiz kılar.#special-heading { color: red; }:
ID seçicisi 100 puanlık specificity değerine sahiptir ve hem sınıf hem de element seçicisini geçersiz kılar.#special-heading.highlight { color: orange; }:
ID ve sınıf kombinasyonu, toplamda 110 puanlık specificity değerine sahiptir (100 puan ID seçicisinden ve 10 puan sınıf seçicisinden gelir). Bu seçici en yüksek specificity değerine sahip olduğu için diğer tüm seçicileri geçersiz kılar veh1‘in rengi turuncu olur.
Bu örnek, bir elemente birden fazla stil uygulanması durumunda specificity değerlerinin toplandığını ve en yüksek değere sahip olan seçicinin baskın olduğunu gösterir. Bu nedenle, aynı elemente farklı specificity düzeylerinde stiller uygulandığında, toplam değeri en yüksek olan kural uygulanır. Burada #special-heading.highlight seçicisi toplam 110 puanla diğerlerini geçersiz kılmıştır.
Bu nedenle, bir seçici içinde birden fazla ID, sınıf veya element seçicisi kullanıldığında, bu seçicinin specificity değeri toplam olarak artar. Ancak unutulmamalıdır ki, satır içi stiller her zaman en yüksek önceliğe sahip olacaktır ve bu tür kombinasyonlar genellikle karışıklığa yol açabilir. Dolayısıyla hesaplama yapmaya özen gösterilmelidir.
Ayrıca şunu da belirtmek isterim ki, “Cascading” (Cascading Style Sheets) terimi stil tanımlamalarının nasıl “kademeli” bir şekilde uygulandığına işaret eder. Cascading kuralları, bir elementin hangi stil tanımlamalarını alacağını belirler. İşte specificity tam da bu kademeli sürecin merkezinde yer alır. Bir HTML elementi için birden fazla stil tanımı varsa, tarayıcı hangi stilin uygulanacağına karar vermek için specificity değerlerini kullanır. “Bu işlemi nasıl mı yapar?” Bakınız:
- İlk olarak, tarayıcı bir element için uygulanabilir tüm stil tanımlamalarını toplar.
- Specificity değerlerini kullanarak bu stilleri sıralar.
- En yüksek specificity değerine sahip stil, elemente uygulanır. Eğer iki stil tanımının specificity değeri aynıysa, CSS dosyasında hangisi sonradan tanımlanmışsa o stil uygulanır.
- Eğer stil tanımlamaları arasında inline stil (HTML dokümanında
styleözelliği ile tanımlanmış stil) varsa, bu her zaman en yüksek önceliğe sahip olur, diğer tüm specificity değerlerini geçersiz kılar.
Görüleceği üzere “cascading” ve “specificity” kavramları, stil tanımlamalarının ne zaman ve nasıl bir elemente uygulanacağını belirlemek için birlikte çalışır. Özetle:
| Seçici Tipi | Özgüllük | Baskınlık Sırası |
|---|---|---|
| Inline stil | (1,0,0,0) | 1 |
| ID Seçici | (0,1,0,0) | 2 |
| Sınıf, Pseudo-class, Nitelik | (0,0,1,0) | 3 |
| Tip ve Pseudo-element Seçici | (0,0,0,1) | 4 |
| Evrensel Seçici | (0,0,0,0) | 5 |
Kötü bir stilleme, genelde gereksiz karmaşıklık, tekrarlar ve yüksek specificity değerleriyle tanınır. Bu durum, kodun yönetimini zorlaştırır ve ileride düzenlemeyi problemli hale getirir. Bunun yerine, iyi bir stilleme, hem okunabilirliği artırır hem de yeniden kullanılabilirliği mümkün kılar. Aşağıda kötü bir örnek ve bu örneğin nasıl iyileştirileceği gösterilmiştir.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 24px;
color: blue;
font-weight: bold;
}
#main-heading {
font-size: 28px;
color: red;
}
div#main-heading {
font-size: 32px;
}
#main-heading.special {
color: green;
text-transform: uppercase;
}
h1#main-heading.special {
font-weight: normal;
}
</style>
</head>
<body>
<h1 id="main-heading" class="special">Kötü Bir Stilleme</h1>
</body>
</html>
- Specificity çok karmaşık: ID, sınıf ve element seçicileri bir arada kullanıldığından hangi stilin uygulanacağını anlamayı zorlaştırıyor.
- Gereksiz tekrarlar:
#main-headingiçin birden fazla kural yazılmış ve her biri farklı özellikler içeriyor. Bu da, kodun okunabilirliğini ve düzenlenebilirliğini azaltmıştır. - Esneklik yok: ID seçicisi kullanıldığı için, bu stili başka bir başlıkta kullanmak zorlaşmaktadır.
- Yönetim zorluğu: Aynı elemente farklı kurallar uygulandığı için hangi stilin baskın olduğunu anlamak karmaşık hale geliyor.
Bu kodu şu şekilde yazmalıyız:
<!DOCTYPE html>
<html>
<head>
<style>
.heading {
font-size: 24px;
color: blue;
font-weight: bold;
}
.heading.special {
font-size: 32px;
color: green;
text-transform: uppercase;
font-weight: normal;
}
</style>
</head>
<body>
<h1 class="heading special">Doğru Bir Stilleme</h1>
</body>
</html>
- Specificity sadeleştirildi: Sadece sınıf seçicileri kullanarak hem okunabilirliği artırır hem de kodun daha kolay düzenlenmesini sağlar.
- Tekrar kullanılabilirlik sağlandı:
headingsınıfı, başlık stillerini genel olarak tanımlarkenspecialsınıfı ise bu stilin özel bir varyasyonunu uygular. - Daha az karmaşıklık: Her sınıfın belirli bir amacı var ve aynı özellikler farklı seçicilerde tekrarlanmadı.
- Esneklik artırıldı: Bu sınıflar, başka bir başlıkta kolayca yeniden kullanılabilir. Örneğin,
<h2 class="heading special">ile aynı stil başka bir elemente uygulanabilir.