CSS Nesting Nedir?

giriiş

CSS ön işlemcisiyle çalışmış bir ön uç geliştiriciyseniz, muhtemelen iç içe yerleştirme özelliğiyle karşılaşmış veya kullanmışsınızdır. Bu popüler bir özellikti ve benim için CSS ön işlemcisi kullanmamı sağlayan özelliklerden biriydi.

Bu yıl, yerel CSS yerleştirme tüm büyük tarayıcılarda desteklendi: Chrome, Firefox ve Safari. Bu, CSS yazmayı kolaylaştıran temel bir CSS özelliğidir. Bu makalede, CSS yerleştirme hakkında şimdiye kadar öğrendiklerimi belgeleyecek ve bulgularımı kullanım örnekleri ve örneklerle birlikte sizinle paylaşacağım.

Heyecanınız ve odaklanmanız dışında uymanız gereken hiçbir ön koşul yok.

CSS'de yuvalama, birçok geliştirici için uzun zamandır beklenen bir özellikti. Eskiden Sass veya Less gibi CSS ön işlemcilerine güveniyorduk. Size kısaca bir genel bakış sunayım:

Aşağıdaki örneği ele alalım. .nav__item seçicisinde bir simgemiz var.

.nav__item {
.icon {
display: flex;
padding: 1rem;
}
}

Yukarıdaki kod geçerli bir Sass kodudur. Derlendiğinde tarayıcı için şöyle görünecektir:

.nav__item .icon {
display: flex;
padding: 1rem;
}

Yerel CSS iç içe yerleştirmeyle, aynı CSS olduğu gibi çalışacaktır. İşte yerel CSS iç içe yerleştirme ile tarayıcının DevTools'u arasındaki karşılaştırmayı gösteren bir şekil.

Tarayıcının CSS'i, CSS'de görüntülendiği gibi (neredeyse) nasıl görüntülediğine dikkat edin.

Bu CSS Sass'a derlenseydi, tarayıcı bunu aşağıdaki gibi görüntülerdi:

CSS Yuvalamanın Faydaları

Bana göre, iç içe CSS'i kullanışlı kılan geçerli nedenler var:

• CSS'in okunması daha kolaydır.
• Birlikte gruplama stili
• Belirli stilleri sınırlama
• Sınıfları veya kimlikleri olmayan HTML öğelerini şekillendirme.

CSS NESTING kuralları

CSS yuvalama konusunda sizi eğitmek için, çeşitli CSS sorunlarına dair görsel örnekler sunmaya ve yuvalamanın bunları çözmeye nasıl yardımcı olabileceğini göstermeye çalışacağım.

Öncelikle & işaretini (ampersand) öğrenmeniz gerekiyor. Bu sembolün gerekli olduğu birçok durum vardır.

Sınıf veya kimliği olmayan bir öğeyi iç içe yerleştirme

Bu örnekte, öğe <a> .nav__item ile biçimlendirilmiştir. CSS&#039;nin geçerli olması için &lt;head&gt; işaretinin kullanılması isteğe bağlıdır.

.nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item a {
}

Ayrıca onay işaretinden de çıkabilirsiniz:

.nav__item {
a {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item a {
}

Bunun yeni bir güncelleme olduğunu ve "Rahat CSS İç İçe Yerleştirme" olarak adlandırıldığını unutmayın. En son Chrome Canary ve Safari Teknoloji Önizleme sürümlerinde çalışır. Adam Argyle'ın Rahat İç İçe Yerleştirme hakkındaki bu gönderisine göz atın.

Bir öğeyi bir sınıfla iç içe yerleştirme

Öncekiyle aynı örneği ele alalım, ancak öğenin şu olduğunu varsayalım: <a> Bir HTML sınıfı var.

.nav__item {
.link {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item .link {
}

Burada sembol kullanmanıza gerek yok. Sınıf adı da gayet iyi iş görecektir.

CSS birleştiricilerini iç içe geçirme

CSS Native Nesting'in avantajlarından biri de kombinatör kullanımıdır. Bazı örneklere bakalım.

Aşağıdaki örnekte, aynı sınıfa sahip başka bir öğeden önce gelen .nav__item sınıfına sahip herhangi bir öğeyi seçmek istiyorum. Bu amaçla bitişik kardeş seçiciyi kullandım.

Yerel CSS iç içe yerleştirmede, bunu taklit etmek için "ve" simgesini kullanabiliriz. Dikkat ettiyseniz, bunu iki kez tekrarladım.

.nav__item {
& + & {
border-left: 2px solid;
}
}

Sihir, ve işaretinin ikinci yinelemesinde gerçekleşiyor. Burada tarayıcı, bitişik kardeş seçiciyi kullanmak istediğimi anlıyor. Bunu gösteren bir şekil göstereyim:

İç içe yerleştirmenin bir başka örneği de çocuk birleştiricisidir. Bir öğenin doğrudan çocuğunu seçebilir.

.nav__item {
> a {
padding: 1rem;
}
}

Ampersand sembolü

.nav__item {
& a {
color: blue;
}
}

Bu, orijinal CSS iç içe yerleştirme spesifikasyonunda gerekliydi. Safari TP 179+ ve Chrome Canary 120'de, iç içe yerleştirilmiş öğeler için "ve" işareti artık gerekli değildir.

Sonuç olarak aşağıdaki çalışmalar ortaya çıkmaktadır:

.nav__item {
a {
color: blue;
}
}

Tek sorun, işaretlemeyi ve işaretlemeyi içermesi gereken şartnamenin önceki sürümüne geri dönmeniz gerekmesidir.

Örneklerle iç içe geçirme: Etkin, Odaklanma, Gezinme

:active, :focus ve :hover kullanıcı eylemiyle etkinleştirilen CSS sözde sınıflarıdır.

CSS iç içe yerleştirme ile, kod tekrarını önlemek için hepsini aynı anda iç içe yerleştirebiliriz. Örnek olarak :hover'ı ele alalım:

button {
&:hover {
background-color: var(--bg-color);
}
&:focus {
outline: solid 2px;
}
}

Yuvalama için ön işlemci kullanıldığında fark, tarayıcının bunu aşağıdaki gibi işlemesidir:

button:hover {
background-color: var(--bg-color);
}
button:focus {
outline: solid 2px;
}

CSS yuvalamanın Chrome, Safari ve Firefox'ta nasıl görüntülendiğine bir bakalım.

CSS nesting için DevTools UX hakkında bazı düşüncelerim var ve bunları makalenin ilerleyen kısımlarında ele alacağım.

Örneklerle İç İçe Yerleştirme: İçerik Gönderme

İç içe CSS'i test etmenin ilk örneklerinden biri, bir gönderinin gövde içeriğini biçimlendirmektir. Başlıklar, metinler, görseller, alıntılar ve daha fazlasını içeren bir makale düşünün.

Manşetler

Başlıkları genellikle aşağıdaki gibi biçimlendiriyoruz:

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
/* styles here */
}

İç içe CSS ile daha kolay:

.post-content {
h1,
h2,
h3,
h4 {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

Aynı şeyi :is() seçicisini kullanarak da yapabiliriz.

.post-content {
:is(h1, h2, h3, h4) {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

Paragraf öğesi

Yaygın bir durum, bir paragrafın içindeki bir bağlantının biçimlendirilmesidir. Bu durumda, CSS iç içe yerleştirme harika çalışır.

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
}
}
}

Bağlantının ayrıca bir gezinme veya odaklanma efektine ihtiyacı olabilir.

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
&:hover {
/* hover styles */
}
}
}
}

Medya sorgularını da iç içe geçirebiliriz.

.post-content {
& p {
/* base styles */
@media (min-width: 400px) {
/* do something */
}
}
}

Bazı durumlarda, bir CMS bir unsur olabilir <p> başka bir öğeye sarın ve stil amaçları için yalnızca doğrudan öğeler için kullanılmalıdır <p> Stilini belirle.

.post-content {
/* Select the direct <p> elements */
> p {
/* base styles */
}
}

Blok alıntı

Bu örnekte, alıntı kendi özel stilini alır ve öğe <p> Alıntı içerisinde alt kenar boşluğunu sıfırlamak için seçin.

.post-content {
& blockquote {
/* custom quote styling */
& p {
margin-bottom: 0;
}
}
}

Gönderi şekli

Gönderi formu bir resim ve bir