Specificity yönetimi
Spesifite hesabını ve yönetimini öğrenirsin.
Spesifite nasıl hesaplanır?
Spesifite, bir seçicinin güç düzeyini belirten üçlü bir sayıdır: (a, b, c). Burada a kimlik sayısı, b sınıf ve öznitelik sayısı, c tür seçici sayısıdır. Yüksek basamak önce kazanır: (1, 0, 0), (0, 5, 5)'i yener.
Örnek: #main .card h2 seçicisinin spesifitesi (1, 1, 1)'dir — bir kimlik, bir sınıf, bir tür. .card h2 ise (0, 1, 1)'dir. Kimlik eklemek b'yi değil a'yı artırır; bu yüzden tek bir kimlik tüm sınıfları geçer.
!important ve riskleri
Bir bildirimin sonuna !important eklersen, o bildirim spesifiteye bakılmaksızın kazanır. Yazımı: color: red !important; — ünlem, boşluk, important sözcüğü. Çekici görünebilir ama gerçek bir çözüm değildir.
Nedeni basit: !important eklediğinde o bildirimi sonradan değiştirmek için başka bir !important daha yüksek spesifiteyle yazmak gerekir. Kısa süre içinde dosya bir !important yığınına döner ve hangi bildirimin neden kazandığını izlemek olanaksızlaşır. Önce spesifiteyi yönetmeyi dene.
Spesifiteyi düşürme stratejileri
Yüksek spesifite, sonradan değişikliği zorlaştırır. Düşük tutmanın yolları şunlar: kimlik yerine sınıf kullan, tür seçicileri sınıflara çevir, iç içe geçmiş seçicilerden kaçın. #main .card h2 yerine .card-title yazmak spesifiteyi (1, 1, 1)'den (0, 1, 0)'a indirir.
BEM gibi adlandırma yöntemleri bu işi kolaylaştırır: her sınıf düz bir sınıftır, iç içe geçmez, spesifite (0, 1, 0)'da kalır. Yeniden kullanım da artar; aynı sınıfı başka bir bloğun içinde de çalıştırabilirsin.
Uygulama Karmaşık seçiciyi sadeleştir
Yüksek spesifiteli seçici yerine daha düşük spesifiteye sahip bir BEM sınıfı yaz. Yeni bir .card__title sınıf seçicisi ekle ve içine font-size: 1.5rem ve color: navy bildirimlerini koy. Başka hiçbir şey ekleme.
Örnek çözümü göster
/* #main .card h2 { color: navy; } yerine BEM sınıfı yaz */
.card__title {
font-size: 1.5rem;
color: navy;
}Kendini test et
-
Hangi seçicinin spesifitesi en yüksektir?
#nav .menu a .menu .item a div nav a #nav ul li.active- #nav .menu a
- .menu .item a
- div nav a
- #nav ul li.active
Cevabı göster
#nav ul li.active — Doğru. #nav ul li.active seçicisi (1, 1, 2) spesifitesine sahiptir; son basamaktaki 2, diğer (1, 1, 1)'i geçer.
-
!important ekleyerek bildirimi güçlendir
.alert { color: red; font-weight: bold ____ }Cevabı göster
.alert { color: red; font-weight: bold !important; } -
Seçiciyi spesifitesine eşle
- #main
- (1, 0, 0)
- .card .title
- (0, 2, 0)
- nav ul li
- (0, 0, 3)
- #nav .item a
- (1, 1, 1)