Selector performansı
Seçici performansını ve optimize etmeyi öğrenirsin.
Seçiciler sağdan sola okunur
Tarayıcı bir CSS bildirimini uygularken seçiciyi sağdan sola okur. En sağdaki parçaya anahtar seçici (key selector) denir ve performansı asıl belirleyen odur.
Örneğin #nav li a bildiriminde tarayıcı önce tüm <a> etiketlerini bulur, sonra her birinin <li> çocuğu mu diye bakar, en son #nav içinde mi diye süzer. Yüzlerce bağlantı varsa bu pahalıdır.
Sınıf tabanlı seçiciler verimlidir
Verimli seçici (efficient selector), tarayıcının en az eşleştirme yaptığıdır. Sınıf seçicileri (.menu-item) bunun için idealdir: tek seferde tüm öğeleri bulur.
BEM gibi adlandırma yöntemleri, derin torun seçiciler yerine tek sınıf kullanır. .card__title yazmak, .card .card-body .card-title yazmaktan hızlıdır. Her sınıf kendi başına anahtar seçicidir.
Uygulama Verimsiz seçiciyi sınıf tabanlıya çevir
Aşağıdaki CSS'i tamamla. Derin torun seçici #main .content ul.list li.item a.link yerine tek sınıf seçici .nav-link kullan. İçinde color: #1d4ed8 ve text-decoration: none bildirimleri olsun.
Örnek çözümü göster
/* eski derin seçici */
#main .content ul.list li.item a.link {
color: #1d4ed8;
text-decoration: none;
}
/* yeni verimli seçici */
.nav-link {
color: #1d4ed8;
text-decoration: none;
}Kendini test et
-
Hangi seçici en verimlidir?
/* üçü de menü öğesini seçiyor */ #main ul li.menu-item { ... } .menu-item { ... } ul li a { ... }- #main ul li.menu-item
- .menu-item
- ul li a
- #main ul li
Cevabı göster
.menu-item — Doğru. .menu-item doğrudan sınıfa eşleşir; derin değil, anahtar seçici dar.
-
Derin seçici yerine sınıf seçici yaz
/* #main ul li.menu yerine */ ____ { padding: 0.5rem; }Cevabı göster
/* #main ul li.menu yerine */ .menu-item { padding: 0.5rem; } -
Seçici türünü maliyetine eşle
- #id
- En hızlı, tek öğe
- .class
- Hızlı, grup eşleşmesi
- tag
- Orta, tüm etiketler
- div p
- Yavaş, torun tarama