Özet - Bileşen stili

Nesting ile bileşen stilleri kurarsın.

Nesting ile bileşen

Nesting, bir bileşene ait tüm bölümleri tek bir blokta toplar. .profile-card içinde başlık, paragraf, hover durumu ve küçük ekran davranışı yan yana durur; HTML yapısına paralel gider.

Bu derste öğrendiklerini bir araya getirerek bir profil kartı stili kuracağız: temel biçim, sözde sınıflar, bileşik seçiciler ve responsive davranış tek blokta.

Sığ tut

Nesting güçlü bir araçtır ama derinleştikçe seçici önceliği (specificity) artar ve okuma zorlaşır. Üç seviyeden fazla iç içe yazmak genelde iyi bir fikir değildir; stilleri basit tutar.

Bir bileşenin kök seçicisi, çocukları ve sözde sınıfları genelde yeter. Daha derin iç içe geçme gerekiyorsa bu, HTML yapısının sadeleştirilebileceğine işaret edebilir.

Uygulama Profil kartı stilleri

.profile-card seçicisinin içine üç nested bölüm ekle: h2 seçicisi color: navy ile, &:hover sözde sınıfı background: #f5f5f5 ile ve &.featured bileşik seçicisi border: 2px solid navy ile.

Örnek çözümü göster

.profile-card bloğunun içine üç bölüm ekle.
Örnek çözüm:
/* .profile-card içine bölümleri ekle */
.profile-card {
  padding: 1rem;
  h2 {
    color: navy;
  }
  &:hover {
    background: #f5f5f5;
  }
  &.featured {
    border: 2px solid navy;
  }
}

Uygulama Koyu tema ekle

.profile-card seçicisinin içine bir @media (prefers-color-scheme: dark) bloğu ekle ve içine background: #111 ile color: #eee özelliklerini yaz.

Örnek çözümü göster

.profile-card bloğunun içine @media bloğu ekle.
Örnek çözüm:
/* .profile-card içine koyu tema ekle */
.profile-card {
  padding: 1rem;
  @media (prefers-color-scheme: dark) {
    background: #111;
    color: #eee;
  }
}

Kendini test et

Kavramı yazıma eşle

Torun seçici

.card { p { } }
Sözde sınıf

.card { &:hover { } }
Sonek

.btn { &-primary { } }
Bileşik sınıf

.tab { &.active { } }

Bileşeni tamamla

/* profil kartı */
.profile-card {
  padding: 1rem;
  ____ {
    color: navy;
  }
}

Cevabı göster

/* profil kartı */
.profile-card {
  padding: 1rem;
  &:hover {
    color: navy;
  }
}

Sıradaki ders: Meydan okuma - BEM mimarisi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler