CSS iç içe yerleştirme için söz dizimi seçimine yardımcı olun

Birbiriyle rekabet eden iki söz diziminin, bir spesifikasyon adayı tarafından desteklenmesi gerekenleri belirleme konusunda yardımınıza ihtiyacı var.

Adam Argyle

Twitter GitHub

Miriam Suzanne

Twitter

CSS iç içe yerleştirme, CSS'nin bir kural grubu içine eklenmesine olanak tanıyan pratik bir söz dizimi ekidir. SCSS, Less veya Ekran Kalemi kullandıysanız bunun birkaç farklı aromasını görmüş olduğunuzdan emin olabilirsiniz:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Bu dosya, ön işlemci tarafından normal CSS'ye derlendikten sonra aşağıdaki gibi normal CSS'ye dönüştürülür:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Bu söz diziminin resmi bir CSS sürümü dikkate alınıyor. Bu bağlantıyı kaldırmak için topluluğun yardımından yararlanmak istediğimiz bir ayrım var. Bu yayının geri kalanında söz dizimi seçenekleri tanıtılacak. Böylece en sonda ankete katılma konusunda bilgi sahibi olabilirsiniz.

Yukarıda gösterilen iç içe yerleştirme örneği neden tam olarak CSS iç içe yerleştirmenin söz dizimi olamıyor?

En popüler iç içe yerleştirme söz diziminin şu anki gibi kullanılmasının birkaç nedeni vardır:

1. Belirsiz ayrıştırma
   İç içe yerleştirilmiş bazı seçiciler, özellikler ve ön işlemciler gibi görünebilir, bunları derleme zamanında çözebilir ve yönetebilir. Tarayıcı motorlarında aynı olanaklar sunulmaz, seçicilerin hiçbir zaman geniş bir çerçevede yorumlanması gerekmez.
   

2. Ön işlemci ayrıştırma çakışmaları
   CSS'nin iç içe yerleştirme yöntemi, ön işlemcileri veya mevcut geliştirici iç içe yerleştirme iş akışlarını bozmamalıdır. Bu durum, söz konusu ekosistemler ve topluluklar açısından aksamaya yol açar ve dikkate alınmaz.
   

3. :is() bekleniyor
   Temel iç içe yerleştirme için :is() gerekmez ancak daha karmaşık iç içe yerleştirme gerekir. Seçici listeleri ve iç içe yerleştirmeyle ilgili kısa bir tanıtım için 3. Örnek'e bakın. Seçici listesinin başında değil, bir seçicinin ortasında olduğunu düşünün. Bu durumlarda, seçicileri başka bir seçicinin ortasında gruplandırmak için :is() gerekir.
   

Karşılaştırdığımız öğelere genel bakış

CSS iç içe yerleştirmenin doğru olmasını istiyoruz ve bu nedenle topluluğu dahil ediyoruz. Aşağıdaki bölümler, değerlendirmekte olduğumuz üç olası sürümü açıklamaya yardımcı olacaktır. Ardından, karşılaştırma amacıyla bazı kullanım örneklerine bakacağız ve sonunda, genel olarak hangi yöntemi tercih ettiğinizi soran küçük bir anket olacak.

1. Seçenek: @nest

Bu, CSS İç İçe Yerleştirme 1'de belirtilen geçerli söz dizimidir. İç içe yerleştirilmiş yeni seçicileri & ile başlatarak ekleme stillerinin iç içe yerleştirilmesi için pratik bir yol sunar. Ayrıca, yalnızca özne eklemediğiniz durumlarda, & bağlamını yeni bir seçicinin içinde herhangi bir yere yerleştirmek için @nest olanağı sunar. Esnek ve minimumdur. Ancak kullanım alanınıza bağlı olarak @nest veya &'yi hatırlamanız gerekmez.

2. Seçenek: @nest kısıtlanmış

Bu, iki iç içe yerleştirme yöntemini hatırlamak için bahsedilen maliyeti azaltmak amacıyla daha katı bir alternatiftir. Bu kısıtlı söz dizimi, iç içe yerleştirmenin yalnızca @nest sonrasında gerçekleşmesine izin verir. Bu nedenle, yalnızca ekleme kolaylığı kalıbı yoktur. Seçimdeki belirsizliği ortadan kaldırarak, hatırlaması kolay bir iç içe yerleştirme yolu yaratmak, ama gelenekler uğruna açıklıktan ödün vermek.

Not: Belirsizliği veya kısalığı sevmediklerine karar vermeleri durumunda, daha az kısıtlı olan @nest söz diziminin (1. seçenek) bir ekip genelinde bir kullanım kuralını uygulamak için linter aracını kullanabileceğini belirtmek gerekir. Teknik özellikleri değiştirmek aşırı bir önlem olabilir.

3. Seçenek: Braket

Çift söz dizimini veya @nest tekliflerindeki ekstra karmaşayı önlemek için Miriam Suzanne ve Elika Etemad, bunun yerine ek kıvrık ayraçlara dayanan alternatif bir söz dizimi önerdi. Bu, yalnızca iki ekstra karakterle ve yeni "at" kuralı olmadan söz dizimi netliği sağlar. Ayrıca, benzer şekilde iç içe yerleştirilmiş birden çok seçiciyi basitleştirmek üzere, iç içe yerleştirilmiş kuralların gerekli iç içe yerleştirme türüne göre gruplanmasına da olanak tanır.

1. Örnek: Doğrudan iç içe yerleştirme

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest her zaman

.foo {
  color: #111;

  @nest & .bar {
    color: #eee;
  }
}

parantezler

.foo {
  color: #111;

  {
    & .bar {
      color: #eee;
    }
  }
}

Eşdeğer CSS

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

2. Örnek: Bileşik iç içe yerleştirme

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest her zaman

.foo {
  color: blue;

  @nest &.bar {
    color: red;
  }
}

parantezler

.foo {
  color: blue;

  {
    &.bar {
      color: red;
    }
  }
}

Eşdeğer CSS

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

3. Örnek: Seçici listeleri ve iç içe yerleştirme

@nest

.foo, .bar {
  color: blue;

  & + .baz,
  &.qux {
    color: red;
  }
}

@nest her zaman

.foo, .bar {
  color: blue;

  @nest & + .baz,
  &.qux {
    color: red;
  }
}

parantezler

.foo, .bar {
  color: blue;

  {
    & + .baz,
    &.qux {
      color: red;
    }
  }
}

Eşdeğer CSS

.foo, .bar {
  color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
  color: red;
}

4. Örnek: Birden çok düzey

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

    & > p {
      font-size: .9rem;
    }
  }
}

@nest her zaman

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

    @nest & > p {
      font-size: .9rem;
    }
  }
}

parantezler

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

      {
        & > p {
          font-size: .9rem;
        }
      }
    }
  }
}

Eşdeğer CSS

figure {
  margin: 0;
}

figure > figcaption {
  background: hsl(0 0% 0% / 50%);
}

figure > figcaption > p {
  font-size: .9rem;
}

5. Örnek: Üst öğe içine yerleştirme veya konu değişikliği

@nest

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

@nest her zaman

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

parantezler

.foo {
  color: red;

  {
    .parent & {
      color: blue;
    }
  }
}

Eşdeğer CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

6. Örnek: Doğrudan ve üst iç içe yerleştirmeyi birlikte kullanma

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest her zaman

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    @nest &.baz {
      color: green;
    }
  }
}

parantezler

.foo {
  color: blue;

  {
    .bar & {
      color: red;

      {
        &.baz {
          color: green;
        }
      }
    }
  }
}

Eşdeğer CSS

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

.bar .foo.baz {
  color: green;
}

Örnek 7: Medya sorgusu iç içe yerleştirme

@nest

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

veya açık / genişletilmiş

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

@nest her zaman (her zaman açık)

.foo {
  display: grid;

  @media (width => 30em) {
    @nest & {
      grid-auto-flow: column;
    }
  }
}

parantezler

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

veya açık / genişletilmiş

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

Eşdeğer CSS

.foo {
  display: grid;
}

@media (width => 30em) {
  .foo {
    grid-auto-flow: column;
  }
}

Not: Dolaylı iç içe yerleştirme adı verilen pratik bir söz dizimi vardır. Her bir örnekteki üst/ilk örnekler, stil kurallarının kapsamının, iç içe yerleştirildikleri örtülü seçici kapsamına uygulandığı örtülü iç içe yerleştirme özelliğini göstermektedir. Dolaylı iç içe yerleştirme, iç içe yerleştirilmiş birden fazla seçicinin olması gerektiğinde ayarlama gerektirir. Bu noktada açık iç içe yerleştirme stiline göre yeniden düzenleme yapmanız gerekir.

8. Örnek: İç içe yerleştirme grupları

@nest

fieldset {
  border-radius: 10px;

  &:focus-within {
    border-color: hotpink;
  }

  & > legend {
    font-size: .9em;
  }

  & > div {
    & + div {
      margin-block-start: 2ch;
    }

    & > label {
      line-height: 1.5;
    }
  }
}

@nest her zaman

fieldset {
  border-radius: 10px;

  @nest &:focus-within {
    border-color: hotpink;
  }

  @nest & > legend {
    font-size: .9em;
  }

  @nest & > div {
    @nest & + div {
      margin-block-start: 2ch;
    }

    @nest & > label {
      line-height: 1.5;
    }
  }
}

parantezler

fieldset {
  border-radius: 10px;

  {
    &:focus-within {
      border-color: hotpink;
    }
  }

  > {
    legend {
      font-size: .9em;
    }

    div {
      + div {
        margin-block-start: 2ch;
      }

      > label {
        line-height: 1.5;
      }
    }}
  }
}

Eşdeğer CSS

fieldset {
  border-radius: 10px;
}

fieldset:focus-within {
  border-color: hotpink;
}

fieldset > legend {
  font-size: .9em;
}

fieldset > div + div {
  margin-block-start: 2ch;
}

fieldset > div > label {
  line-height: 1.5;
}

9. Örnek: Karmaşık iç içe yerleştirme grubu "Mutfak Lavabosu"

@nest

dialog {
  border: none;

  &::backdrop {
    backdrop-filter: blur(25px);
  }

  & > form {
    display: grid;

    & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

@nest her zaman

dialog {
  border: none;

  @nest &::backdrop {
    backdrop-filter: blur(25px);
  }

  @nest & > form {
    display: grid;

    @nest & > :is(header, footer) {
      align-items: flex-start;
    }
  }

  @nest html:has(&[open]) {
    overflow: hidden;
  }
}

parantezler

dialog {
  border: none;

  {
    &::backdrop {
      backdrop-filter: blur(25px);
    }

    & > form {
      display: grid;

      {
        & > :is(header, footer) {
          align-items: flex-start;
        }
      }
    }
  }

  {
    html:has(&[open]) {
      overflow: hidden;
    }
  }
}

Eşdeğer CSS

dialog {
  border: none;
}

dialog::backdrop {
  backdrop-filter: blur(25px);
}

dialog > form {
  display: grid;
}

dialog > form > :is(header, footer) {
  align-items: flex-start;
}

html:has(dialog[open]) {
  overflow: hidden;
}

Oy verme zamanı

Bunun adil bir karşılaştırma olduğunu ve değerlendirdiğimiz söz dizimi seçenekleriyle ilgili örnek bir tabak olduğunu düşüneceğinizi umuyoruz. Lütfen bu şartları dikkatlice inceleyin ve aşağıdakilerden hangisini tercih ettiğinizi bize bildirin. CSS iç içe yerleştirmeyi, hepimizin bildiği ve seveceği bir söz dizimiyle geliştirmemize yardımcı olduğunuz için teşekkür ederiz.

Ankete katılın.