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

Sıradaki ders: Layout ve paint

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler