Ö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.

Sıradaki ders: CSS performansı nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler