kod

CSS Özgünlüğü Nasıl Kullanılır?

CSS'yi düzenli olarak kullanmayı planlıyorsanız, özgüllüğün ne olduğu ve nasıl uygulandığı hakkında bir anlayış geliştirmeniz gerekir.

Şamandıralar ve konumlar dışında, özgüllük, ustalaşmaya izin vermek için alışmak en zor şeylerden biri olabilir. CSS'inizde kullandığınız seçicilerin hepsi farklı ağırlığa sahiptir ve bunlar özgüllük tarafından kontrol edilir. Bu yüzden bazen, bir öğeye bir kural uyguladığınızda, tasarımınıza yansıtılmaz.

CSS'nizi kesmek için korkulan önemli bir anahtar kelimeye güvenmişseniz, bu makale tam size göre.

Bir tarayıcı CSS'yi nasıl okur?

Temellerinizi sağlamlaştırmak için, tarayıcının CSS'yi nasıl okuduğunu ve kuralların nasıl geçersiz kılındığını bilmeniz gerekir.

İlk olarak tarayıcı, aşağıdan yukarıya doğru bir stil sayfasını okuyacaktır. 

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

10. satırda belirttiğiniz kural geçersiz kılınır ve bağlantı etiketi mavi olur, çünkü tarayıcı daha yüksek bir önceliğe sahip olmak için CSS'nizi daha aşağı bir düzeye getirecektir.

Bu ayrıca css dosyalarınızı içe aktardığınız gerçek siparişle de çalışır, örneğin:

Style.css 'i yazdıktan sonra custom.css' i (style.css) yazdığınız herşeyi (şimdi için indirim, seçmenlerin ağırlığı) geçersiz kılacak ve custom.css'de ne için değiştirileceğinden, bu teknik sıklıkla kullanılır. tema yaratıcıları tarafından kullanıcıya ana dosyayı değiştirmeden kendi stillerini ekleyebilecekleri bir oda vermeleri. (Ancak, custom.css'nin style.css yerine tamamen geçmediğini, yalnızca özel olarak geçersiz kılınan kuralların değiştirileceğini unutmayın.)

Özgünlük

Yukarıdaki her şey sadece her seçicide aynı ağırlığı kullanıyorsanız geçerlidir. Kimlikler, sınıflar veya istifleme öğeleri belirtirseniz, onlara ağırlık verirsiniz ve bu belirli bir özelliktir.

Bir seçicinin özgüllük düzeyini tanımlayan dört kategori vardır: satır içi stiller (bunlar bazen javascript tarafından kullanılır), ID'ler, Sınıflar ve öğeler. Özgünlük nasıl ölçülür? Özgüllük, uygulanmakta olan en yüksek puan değerine sahip olan puanlarla ölçülür.

  • Kimlikler 100 puan.
  • Sınıflar 10 puan değerindedir.
  • Elementler 1 puan değerinde.

Bunu bilerek, böyle bir seçici kullanırsanız: 

#content .sidebar .module li a

Toplam ağırlığı bir kimlik, iki sınıf ve iki unsur olan 122 puan (100 + 10 + 10 + 1 +1) 'dir.

Hatırlanacak şeyler

  • ID'lerin sınıflara ve öğelere göre çok fazla ağırlığı vardır, bu nedenle ID'lerin stil sayfalarınızdaki kullanımını en aza indirgemeniz gerekir.
  • Seçicilerin aynı ağırlığa sahip olduğu durumlarda, ortaya çıktıkları sıraya geri dönülür, ikincisi daha yüksek önceliğe sahiptir.
  • Stilleri, HTML yapraklarında stil sayfalarına gömülüdür, çünkü bunlar öğeye daha yakındır.
  • Satır içi stilleri geçersiz kılmanın tek yolu,! Önemli ifadeyi kullanmaktır.
  • Sözde sınıflar ve öznitelikler normal sınıflarla aynı ağırlığa sahiptir.
  • Sözde elemanlar normal bir eleman ile aynı ağırlığa sahiptir.
  • Evrensel seçici (*) ağırlık içermez.

Örnekler 

ul li a {color: red;}

Bu seçici 3'lük bir ağırlığa sahip olacak, yani başka bir yerde bir sınıf ekleyerek bunu geçersiz kılabilirsiniz. 

.content #sidebar {width: 30%;}

Bu seçmen, esas olarak 110 toplamın 100 puanını oluşturan kimlikten dolayı 110 puanlık bir ağırlığa sahiptir. 

.post p:first-letter {font-size: 16px;}

Bu seçici pseudo-elementten beri 12 puanlık bir ağırlığa sahiptir: ilk harf sadece 1 noktayı ağırlar ve p etiketi de bu şekilde olur. 

p {font-family: Helvetica, arial, sans-serif;}

Bu seçici sadece 1 puan ağırlığındadır, bu tip seçiciler sayfanın en üstünde kullanılmalı, daha sonra belirli stilleri işaretlemek için temel stilleri işaretleyebilirsiniz.

Her zaman bir ID seçiciyi geçersiz kılmak için aynı eleman için 256 sınıf yazmanız gerektiğini unutmayın. 

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Sadece bu şekilde ikinci seçici, kimliği kullanarak birisini geçecektir.

Sonuç

Özgüllük CSS'nin gösterişli bir yönü değil, ama bence en çok gözden kaçan alan. Özgünlüğünüzü düzeltmek, yalnızca hatalardan kaçınmanıza yardımcı olmakla kalmaz, hem geliştirmenizi hem de son sitenizi hızlandıracaktır.

CSS yazarken kimlikleri fazla kullanıyor musunuz? Hiç geri dönsün mü önemli? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, hassas görüntü Shutterstock üzerinden.

önemli css en iyi uygulamaları css özgüllüğü css kurallarını geçersiz kılma stil