Yeni Başlayanlar İçin CSS Spesifikliği Kılavuzu

Hiç bir CSS kuralını geçersiz kılmayı denediniz mi, ancak olması gerektiği gibi çalışmadığını gördünüz mü? Veya bir öğe farklı CSS seçici kombinasyonlarıyla birden çok kez hedeflendiğinde, aynı anda yalnızca bir kuralın uygulandığını fark ettiniz mi? Bunun nedeni, CSS özgüllük kurallarıdır.

CSS özgüllük kuralları, özellikle yeni başlayanlar için anlaşılması en kafa karıştırıcı kavramlardan biri olabilir.

Standart bir düzen kuralı olarak CSS'ye yeni başlıyorsanız, en son CSS kuralının eskisini geçersiz kılması gerektiğini düşünebilirsiniz. Basit görünüyor, ancak her zaman bu şekilde çalışmıyor. CSS özgüllüğüne, ne zaman ve hangi CSS kuralının uygulanacağına bağlıdır.

Öyleyse, CSS özgüllüğünün ne olduğunu ve onu verimli bir şekilde nasıl kullanacağımızı inceleyelim.

CSS'de Spesifiklik nedir?

Basit bir ifadeyle, bir öğe için birden fazla CSS seçiciniz varsa, daha yüksek özgül değere sahip olan uygulanacaktır.

Farklı seçicilerin farklı ağırlıkları vardır ve tarayıcı hangisinin o öğeyle en alakalı olduğuna karar verir.

O nasıl çalışır?

Bir seçicinin özgüllüğü aşağıdaki dört düzeyde kategorize edilebilir:

1. Satır içi stil veya CSS
2. Kimlikler
3. Sınıflar, sözde sınıflar ve nitelikler
4. Öğeler veya sözde öğeler

Satır içi stiller veya CSS'nin doğrudan HTML belgesine uygulandığı CSS <p> gibi görünür. Satır içi stiller her zaman en yüksek özgüllük düzeyine sahip olacaktır.

Bu sıralamada ikincisi, #content gibi kimliklerdir . Bu nedenle, bir kimlik kullanan herhangi bir seçici, ikinci en yüksek özgüllük düzeyine sahip olacaktır.

Classes , pseudo-classes ve nitelikler bu sırada üçüncü sıradadır. Sırasıyla: .post , :hover ve [title] gibi görünürler.

Öğeler ve sözde öğeler en düşük değere sahiptir. li ve :after bir öğenin ve sözde öğenin temel örnekleridir.

Hesaplama

Spesifiklik değeri aşağıdaki kılavuzla hesaplanabilir:

• Satır içi stil veya css: 1,0,0,0
• Kimlik: 0,1,0,0
• Sınıf veya sözde sınıf ve öznitelik: 0,0,1,0
• Öğeler ve sözde öğeler: 0,0,0,1
• Evrensel seçici(*): 0

Seçicinizin özgüllük seviyesini kontrol etmek için Özgünlük hesaplayıcıyı kullanabilirsiniz.

CSS Spesifikliğinin Temel Kuralları

Artık özgüllüğün nasıl düzenlendiği hakkında bir fikriniz olduğuna göre, bazı genel kuralları ve örnekleri tartışalım!

Bu, örneklerimde kullanacağım temel HTML'dir. Burada #content içeren bir kap içinde küçük bir listem var.

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Kural 1

Bir öğe için iki veya daha fazla aynı seçiciye sahipseniz, hepsi aynı özgüllük değerine sahip olacaktır, bu nedenle düşük olan veya sonuncusu uygulanacaktır.

Aşağıdaki CSS parçacığında, her iki seçici de eşit özgüllüğe sahiptir, bu nedenle li rengi, satırın daha aşağısına yerleştirildiği için sarı olacaktır.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Kural 2

Bir eleman için birden çok seçici kullanılıyorsa, daha yüksek özgül değere sahip seçici uygulanacaktır.

Aşağıdaki örnekte, li iki farklı seçici tarafından hedeflenmiştir ve her ikisi de yazı tipi rengini etkiler. Peki hangi kural uygulanmalı?

Önceki örnekte olduğu gibi, CSS sıralama konseptinde ikincisi uygulanmalıdır (böylece li rengi yeşil olur), ancak .list li özgüllük değeri ul li daha yüksek olduğu için renk kırmızı kalacaktır.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Kural 3

Belirlilik düzeyinde sınıfın unsurlardan daha ağır bastığını gördük, şimdi bir kimlikle ne olacağını görelim.

Aşağıdaki örnekte, hem aynı öğeyi hedefleyen hem de yazı tipi rengini etkileyen bir sınıfımız ve kimliğimiz var. Yine aynı soru: Hangi kural uygulanmalı?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Daha önce bahsedildiği gibi ID, sınıf, nitelikler ve öğelerden daha yüksek özgüllük değerine sahiptir, bu nedenle renk mavi olacaktır. Her zaman daha yüksek özgüllük düzeyi için kimliği hedefleyin.

Kural 4

!important herhangi bir özgüllük değeri seçicisini geçersiz kılar. Ancak !important aşırı kullanılmaması gerektiğini unutmayın, çünkü bu bir CSS en iyi uygulaması olarak kabul edilmez.

CSS'nizin yazarıysanız ve mevcut bir kuralı geçersiz kılmıyorsanız, !important kullanmanıza pek gerek kalmaz.

!important yalnızca bir başkasının CSS'sini geçersiz kılmaya çalıştığınızda ve özgünlüğünüzün önceki seçiciden daha ağır basmadığı durumlarda, özellikle de CSS'nizin HTML'deki yerleşim sırasını kontrol edemediğinizde kullanın.

Bu, çoğunlukla farklı eklentiler ve temalar tarafından zaten eklenmiş birçok CSS dosyası bulacağınız WordPress'te çalışırken gerçekleşir.

Genel olarak, eklenti CSS'si eklentiye özeldir ve herhangi bir CSS çakışmasını önlemek için kimlikleri, satır içi css'yi ve hatta daha yüksek özgüllük için !important kullanır. Bu CSS'yi geçersiz kılmak için daha da yüksek özgüllük kullanmanız gerekir; bu senaryolar için !important kullanabilirsiniz.

Aşağıdaki örnekte, farklı CSS seçicileri ile hedeflenen li ile önceki senaryoları yeniden yaratıyorum, ancak !important tüm kuralları geçersiz kıldığını ve rengin sarı olacağını görebilirsiniz.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important size CSS'nizi herhangi bir özgüllük seviyesinin üzerinde uygulama gücü verecektir.

!important kullanırken dikkatli olmalısınız çünkü bu kuralı geçersiz kılamazsınız. Bir !important geçersiz kılmanın tek yolu, daha sonra CSS'de başka bir !important kullanmaktır, böylece CSS'nizin gücünü anlamadıysanız kolayca dağınık görünebilir.

Birkaç istisna

Öğeler ve sözde öğeler en az özgüllüğe sahiptir, ancak birkaç ilginç (ve biraz kafa karıştırıcı!) istisna vardır. (Az önce gördüğümüz kurallara uymadıkları için kafa karıştırıcı.)

Bu örnekte, :first-child (sözde sınıf) ve : first-line (sözde öğe) göreceksiniz. Sözde sınıfların sözde öğelerden daha yüksek özgüllüğe sahip olacağını yeni öğrendik, buna göre paragrafın ilk satırının rengi yeşil olmalı, bunun yerine pembe olacak.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Sıralamanın burada bir sorun olacağını düşünebilirsiniz, ancak sırayı değiştirmek bile çıktıyı değiştirmeyecektir. Spesifiklik hesaplayıcı, sonuçtan farklı bir resim gösterir.

Özgüllüğün biraz kafa karıştırıcı olduğu yer burasıdır. Yalnızca bu sonucun nedeninin :first-line öğeye daha yakın olduğunu ve muhtemelen satır içi stil olarak ele alındığını varsayabilirim. Başka bir örnek için jsfiddle'ı kontrol edebilirsiniz.

Spesifiklik verimli bir şekilde nasıl kullanılır?

CSS özgüllük kurallarını anlarsanız, onu çok verimli bir şekilde kullanabilir ve CSS'nizi tekrar kullanılabilir hale getirebilirsiniz.

Diyelim ki aynı .button farklı arka plan renkleriyle kullanmak istiyorsunuz, bu nedenle belirli bir seçici ayarladınız: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

.button bir .red-block kapsayıcısına sarılmışsa varsayılan düğme arka plan rengi kırmızı olarak değişir.

CSS özgüllüğü, tema yazarının CSS'sini kendi CSS'nizle geçersiz kılmaya çalıştığınız WordPress temalarını özelleştirirken çok kullanışlıdır.

Kaçınılması gereken yaygın hatalar

Bazı insanlar, iyi bir uygulama olmayan ultra spesifik seçiciler kullanır. Yalnızca gerektiği kadar spesifik olun. Örneğin, bu kod parçacığı li hedefliyor ancak çok spesifik.

 [css] div#content ul.list li{ color: purple; } [/css]

CSS'niz konusunda çok spesifikseniz, katılaşacak ve yeniden kullanımı zorlaşacaktır. div#content ul.list li yerine kolayca .list li yazabilirsiniz, bu CSS'nizi daha temiz hale getirecektir.

Ek kaynaklar

• Spesifiklik üzerine W3 kuruluşu
• CSS özgüllük hesaplayıcısı
• IE Hatası
• IE Hack'i

Çözüm

Gördüğünüz gibi, CSS özgüllüğü önemli bir araçtır ve her ön uç geliştiricinin araç setinde buna sahip olması gerekir. Bu konseptin net bir şekilde anlaşılması, sizi iyi bir ön uç geliştirici yapmak için uzun bir yol kat edebilir.