Yükleniyor...

CSS İç İçe Yazım

Değişkenler değerlerinize ad verdi. calc ve arkadaşları onları hesapladı. Nesting, bu değerleri kullanan seçicileri düzenler: bir kartın başlığını, düğmesini ve hover stillerini dosya boyunca üst adını tekrarlamak yerine .card içinde tutun.

Alt seçiciyi iç içe yazın

Bir kuralı başka bir kuralın içine yazın. İç içe class veya type seçici, & ile başka bir şey demedikçe üstün torunu olarak (boşluk kombinatörü) bağlanır:

Card styles nested under one parent

css 
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);

.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}

.body {
color: var(--muted, #444);
line-height: 1.5;
}
}

Tarayıcı bunu .card .title ve .card .body olarak genişletir. Hâlâ sıradan torun seçiciler alırsınız — nesting yapı ve yerellik için şekerdir, yeni bir eşleşme modeli değil.

& üst seçici

İç içe kuralın üstle aynı öğeye yapışması gerektiğinde — pseudo-class’lar, pseudo-element’ler veya üstte ekstra class — & kullanın:

Hover and modifier on the same element

css 
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;

&:hover {
background: var(--brand-hover, #1d4ed8);
}

&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}

&.is-primary {
background: var(--brand-strong, #1e40af);
}
}

&:hover demek .button:hover demektir. &.is-primary demek .button.is-primary demektir. & olmadan çıplak :hover { } yerel CSS’de geçersiz nesting’dir — & bağlantıyı açık kılar.

& ile kombinatörler

Doğrudan çocuk, kardeş veya başka açık bir bağ istediğinizde — düz torun boşluğu değil — kombinatörü & sonrasına koyun:

Child and adjacent patterns with &

css 
.nav {
display: flex;
gap: 0.75rem;

& > .item {
padding: 0.35rem 0.6rem;
}

& > .item + .item {
border-inline-start: 1px solid #ddd;
}

/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}

& > .item → .nav > .item. & olmadan iç içe .badge → .nav .badge. Bilinçli seçin: yanlışlıkla derin torunlar yaygın bir nesting kokusudur.

@media’yı bileşenle iç içe yazın

@media gibi at-rule’ları bir stil kuralının içine yazabilirsiniz; böylece breakpoint’ler değiştirdikleri bileşenin yanında yaşar:

Responsive tweaks beside the component

css 
.hero {
padding: 2rem 1.25rem;

h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

@media (min-width: 48rem) {
padding: 3rem 2rem;

h1 {
max-width: 20ch;
}
}
}

Genişletildiğinde media query hâlâ .hero (ve .hero h1) bildirimlerini sarar. Bunu önceki Modern Toolkit derslerindeki token’lar ve clamp() ile eşleştirin — nesting yalnızca kuralları taşır.

Nesting kalıplarına kısa bakış

📊 Yerel nesting kopya kâğıdı

Yazarsınız Anlamı Ne zaman kullanın
.card { .title { } } .card .title Bileşen altında torun stilleyin
.btn { &:hover { } } .btn:hover Aynı öğede pseudo-class
.btn { &.big { } } .btn.big Aynı öğede ekstra class
.nav { & > a { } } .nav > a Açık çocuk kombinatörü
.box { @media (…) { } } O kuralın seçicilerine bağlı media query Breakpoint’leri bileşenle tutun

Nest’leri sığ tutun

İki veya üç düzey genelde okunaklı kalır. Daha derin ağaçlar Sass ekiplerinin «seçici piramidi» sorununu geri getirir: zor diff’ler, daha yüksek specificity ve yalnızca bir dev üstün içinde anlamlı stiller. Net bir bileşen kökü (.card, .nav) tercih edin ve durumlar ile yakın çocukları iç içe yazın — tüm sayfayı değil.

Bileşen paketi: tokens + nest + durumlar

Gerçekçi bir dilim, calc veya variables derslerini tekrarlamadan toolkit’in son üç fikrini birleştirir:

Panel with tokens, nested parts, and a state

css 
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;

.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}

.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}

&.is-compact {
--panel-pad: 0.5rem;
}

@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}

Token’lar hâlâ custom property’dir; calc hâlâ boşluğu türetir; nesting heading, actions, kompakt durumu ve küçük ekran ayarını bir yerde tutar.

Kendiniz deneyin

  1. Düz kurallar .card {}, .card .title {}, .card .meta {} alın ve .card altında nesting ile yeniden yazın.
  2. Bir .link üzerinde &:hover ekleyin ki yalnızca bağlantı (iç içe span değil) renk değiştirsin.
  3. .sidebar içinde @media (min-width: 40rem) iç içe yazarak padding’i genişletin — DevTools’ta genişletilmiş seçicileri doğrulayın.
  4. Yanlışlıkla iç içe :hover { } ( & yok) ifadesini &:hover { } yapın ve geçerli olduğunu not edin.
  5. Dağınık üç düzeyli bir nest’i, iç bloğu kendi class’ına yükselterek iki düzeye indirin.

Sık hatalar

  • & olmadan iç içe :hover { } yazmak — geçersiz veya kastettiğiniz şey değil; &:hover kullanın
  • Çıplak .child’ın .parent.child anlamına geleceğini beklemek — bunun için &.child gerekir
  • Sass &__element BEM hilelerini körü körüne kopyalamak — yerel nesting CSS seçici gramerini izler
  • Beş düzey iç içe yazmak «çünkü yapabiliyoruz» — okunabilirlik ve specificity zarar görür
  • Nesting’in var() veya calc() yerine geçtiğini sanmak — yalnızca seçicileri ve at-rule’ları gruplar

Özet

  • Bileşen stillerini yerel tutmak için alt seçicileri iç içe yazın; varsayılan olarak torunlara genişlerler
  • Aynı öğe durumları (:hover, .is-active) ve açık kombinatörler için & kullanın
  • İnce ayar yaptığınız bileşenin yanında @media iç içe yazın
  • Nest’leri sığ tutun; nesting yapıdır, token veya matematik özelliği değil
  • Modern Toolkit’te sıradaki: container queries — yalnızca viewport değil, üst boyutundan stil

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
6
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 65 / 66
Css Ders