Yerel CSS İç İçe Yerleştirme

Yerel CSS iç içe yerleştirme (temel destek 2024, tüm modern tarayıcılar), daha önce yalnızca Sass/Less ön işlemcilerinde bulunan iç içe yerleştirme söz dizimini CSS kurallarının içine yazmanıza olanak tanır. İç içe kurallar, üst seçicinin bağlamını otomatik olarak devralır.

Alt seçicileri bir üst kural bloğunun içine yazın. Tarayıcı, üst ve alt seçicileri otomatik olarak birleştirir. Bir & (iç içe yerleştirme seçicisi), değiştiriciler ve sözde sınıflar için üst seçiciye açıkça başvurur.

&, iç içe kurallarda üst seçiciyi açıkça temsil eder. Bunu sözde sınıflar (&:hover), sözde öğeler (&::before), değiştirici sınıflar (&.active) ve öznitelik seçicileri (&[disabled]) için kullanın. &, olmadan iç içe kurallar alt öğe seçicileri oluşturur.

Sözde öğe kurallarını doğal biçimde üst öğenin içine yerleştirin: .button { &::before { content: ""; } &::after { content: ""; } }. Bu yöntem, tüm düğme stillerini bir arada tutar ve düz CSS'de gereken seçici tekrarını önler.

Medya sorguları ve diğer at-kuralları kuralların içine yerleştirilebilir (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Duyarlı stiller, dosyanın sonundaki ayrı bir medya sorgusu bloğu yerine etkiledikleri öğeyle birlikte bulunur.

İç içe yerleştirme, özgüllük kurallarını değiştirmez; birleştirilmiş seçici, düz yazılmış hâliyle aynı özgüllüğe sahiptir. İç içe ya da düz yazılan .card .title aynı özgüllüğe sahiptir (0,2,0). İç içe yerleştirme bir söz dizimi kolaylığıdır, özgüllük değişikliği değildir.

& olmadan kullanılan iç içe bir seçici, alt öğe seçicisi oluşturur: .card { .title {} }, .card .title biçiminde derlenir. & ile: .card { &.active {} }, .card.active biçiminde derlenir (boşluk yoktur; bu, alt öğe değil değiştirici sınıftır).

Yerel iç içe yerleştirme BEM için ideal değildir; .block__element ve .block--modifier seçicileri dizelerdir ve iç içe yerleştirme bunları yalnızca & ile oluşturamaz. İç içe yerleştirmeyi sözde sınıflar ve iç içe bileşen yapıları için kullanın; BEM dizesi birleştirme ise hâlâ bir ön işlemci gerektirir.

Sass iç içe yerleştirme söz diziminin çoğu, yerel CSS iç içe yerleştirmesiyle aynıdır. İstisna şudur: Sass, &-modifier dizesi birleştirmesine izin verir; yerel CSS vermez. Geçiş yaparken &- veya &__ kalıplarını kontrol edin ve diğer iç içe yerleştirmeleri korurken yalnızca bu belirli kuralları düzleştirin.

Yerel CSS iç içe yerleştirmesi Chrome 112+, Firefox 117+ ve Safari 16.5+ sürümlerinde desteklenir. Daha eski tarayıcı desteği için derleme sırasında yerel iç içe yerleştirme söz dizimini düz CSS'ye dönüştürmek üzere PostCSS ile postcss-nesting kullanın; böylece bugün yerel iç içe yerleştirmeyle yazabilirsiniz.

Chrome DevTools, iç içe kuralları Stiller panelinde iç içe biçimleriyle gösterir. İç içe bir kurala tıklamak, Kaynaklar panelinde doğru kaynak konumuna gider. Modern DevTools'ta iç içe CSS'de hata ayıklamak, düz CSS'de hata ayıklamak kadar açıktır.

& seçicisiyle ve bu seçici olmadan yapılan iç içe yerleştirme arasındaki fark nedir?

Yerel CSS iç içe yerleştirmesi, Sass benzeri iç içe söz dizimini düz CSS'ye getirir. & seçicisi; sözde sınıflar, sözde öğeler ve değiştiriciler için birleşik seçiciler oluşturur. İç içe @media sorguları, duyarlı stilleri ilgili öğeleriyle birlikte tutar. PostCSS, eski tarayıcılar için yerel iç içe yerleştirmeyi dönüştürerek bugün kademeli geçişi mümkün kılar.