Meydan okuma - BEM mimarisi

BEM ve cascade layers ile büyük bir bileşen mimarisi kurarsın.

BEM ve cascade layers

Büyük bir arayüzde BEM sınıf adları rolü belli eder; @layer bildirimi ise çakışan bildirimlerin hangi sırayla öne çıkacağını belirler. .card__title bir element, .card--featured bir modifier olarak adından okunur.

Bir @layer components bölümü açıp .card bildirimlerini içine koyduğunda, bu bildirimler daha düşük öncelikli olur. Bölüm dışından yazılan .card bildirimi çakışmayı kazanır. BEM adlandırma ve katman sırası birleşince öncelik çakışmaları öngörülebilir kalır.

Uygulama BEM kart bileşenini @layer ile yaz

Bir kart bileşeni kur. @layer components bölümü aç ve içine şu bildirimleri yaz: .card için padding: 1.5rem; .card__title için font-size: 1.25rem ve font-weight: 600; .card--featured için border: 2px solid #f59e0b.

Örnek çözümü göster

/* kart bileşeni */
@layer components {
  .card { padding: 1.5rem; }
  .card__title { font-size: 1.25rem; font-weight: 600; }
  .card--featured { border: 2px solid #f59e0b; }
}

Kendini test et

Bir @layer bölümü içindeki .card bildirimiyle, bölüm dışındaki .card bildirimi çakışırsa hangi kazanır?
```
@layer components {
  .card { padding: 1rem; }
}
.card { padding: 2rem; }
```
- Bölüm dışındaki bildirim kazanır
- Bölüm içindeki bildirim kazanır
- İkisi de uygulanmaz
- Bildirimlerin yazım sırası belirler
Cevabı göster

Bölüm dışındaki bildirim kazanır — Doğru. Katman dışındaki bildirim, katman içindeki bildirimi geçersiz kılar; çünkü katmansız bildirimler en yüksek önceliktedir.
BEM ve katman kavramlarını eşleştir

.card

Block
.card__title

Element
.card--featured

Modifier
@layer components

Öncelik katmanı

Modifier sınıfını tamamla

/* kartın öne çıkan varyantı */
.____ {
  border: 2px solid #f59e0b;
}

Cevabı göster

/* kartın öne çıkan varyantı */
.card--featured {
  border: 2px solid #f59e0b;
}

Sıradaki ders: Meydan okuma - Container sistemi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler