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