Özet - Bileşen kütüphanesi
BEM ve cascade layers ile bileşen kütüphanesi iskeleti kurarsın.
Bileşen kütüphanesi iskeleti
Bir bileşen kütüphanesi, yeniden kullanılan arayüz parçalarını tek yerde toplar: düğmeler, kartlar, formlar, uyarılar. Her bileşen BEM ile adlandırılır, stilleri @layer ile katmanlara konur. Böylece kütüphane, uygulamalar içinde tutarlı ve değiştirmesi kolay kalır.
Tipik bir iskelet: base katmanında sıfırlama ve tipografi; components katmanında her bileşenin kendi bölümü; utilities katmanında yardımcı sınıflar. Bir bileşeni değiştirmek yalnızca tek bir bölümü etkiler; çakışma yok, spesifite düşük, bakım kolay.
Uygulama Bileşen kütüphanesine button ekle
En üste @layer base, components; sıralamasını ekle. Sonra @layer components bloğu içinde bir BEM üçlüsü yaz: .button bloğu için display: inline-flex; .button--primary modifier'ı için background: navy ve color: white.
Örnek çözümü göster
/* katman sıralaması ve button BEM'ini ekle */
@layer base, components;
@layer components {
.button {
display: inline-flex;
}
.button--primary {
background: navy;
color: white;
}
}İskelet nasıl büyür?
Bir bileşen kütüphanesi zamanla büyür. Yeni bir bileşen eklendiğinde tek yapman gereken: components katmanında yeni bir BEM bloğu açmak ve HTML'de o sınıfları kullanmak. Eski bileşenleri bozma riski düşüktür çünkü her sınıf düz ve katmana bağlıdır.
Bu yaklaşımın özeti: adlar BEM ile (block, element, modifier), sıra @layer ile, spesifite düşük ve düz sınıflarla. Üçü birleşince büyük projelerde bile CSS tutarlı ve bakımı kolay kalır.
Kendini test et
-
Mimari parçayı yerine eşle
- base katmanı
- Sıfırlama ve tipografi
- components katmanı
- Bileşen stilleri
- utilities katmanı
- Yardımcı sınıflar
- .button--primary
- BEM modifier
-
Bileşen kütüphanesinde hangi yaklaşım önerilir?
- BEM adları + @layer katmanları
- Tek style.css + !important
- Kimlik seçicileri + iç içe seçiciler
- Yalnızca tür seçicileri
Cevabı göster
BEM adları + @layer katmanları — Doğru. BEM sınıfları düz ve düşük spesifiteli; @layer çakışmayı katman sırasıyla denetler.