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; }