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

İki rakip söz dizimi, hangisinin spesifikasyon adayı olarak desteklenmesi gerektiğini belirlemenize yardımcı olmanızı bekliyor.

Adam Argyle
Miriam Suzanne

CSS iç içe yerleştirme, CSS'nin bir kural kümesinin içine eklenmesine olanak tanıyan kullanışlı bir söz dizimi eklemesidir. SCSS, Less veya Stylus kullandıysanız bu durumun birkaç farklı versiyonunu görmüşsünüzdür:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Ön işlemci tarafından normal CSS'ye derlendikten sonra aşağıdaki gibi normal CSS'ye dönüşür:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Bu söz diziminin resmi bir CSS sürümü üzerinde çalışıyoruz ve topluluğun yardımıyla bu tercihi netleştirmek istiyoruz. Bu yayının geri kalanında, söz dizimi seçenekleri tanıtılacak. Böylece, sonunda ankete katılmak için gerekli bilgilere sahip olacaksınız.

Neden yukarıda gösterilen tam iç içe yerleştirme örneği, CSS iç içe yerleştirme söz dizimi olamaz?

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

  1. Belirsiz ayrıştırma
    Bazı iç içe seçiciler tam olarak özelliklere ve ön işlemcilere benzeyebilir. Bu seçiciler, derleme sırasında çözümlenebilir ve yönetilebilir. Tarayıcı motorları aynı olanaklara sahip olmayacağından seçiciler hiçbir zaman gevşek bir şekilde yorumlanmamalıdır.

  2. Ön işlemci ayrıştırma çakışmaları
    CSS'nin iç içe yerleştirme yöntemi ön işlemcileri bozmamalıdır veya mevcut geliştirici iç içe yerleştirme iş akışlarını bozmamalıdır. Bu durum, söz konusu ekosistemler ve topluluklar için rahatsız edici ve düşüncesizce olur.

  3. :is() bekleniyor
    Temel iç içe yerleştirme için :is() gerekmez ancak daha karmaşık iç içe yerleştirme için gerekir. Seçici listeleri ve iç içe yerleştirme hakkında kısa bir giriş için 3. örneğe bakın. Seçici listesinin başlangıcında değil de bir seçicinin ortasında olduğunu düşünün. Bu gibi durumlarda, seçicileri başka bir seçicinin ortasında gruplandırmak için :is() gereklidir.

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

CSS iç içe yerleştirme özelliğini doğru şekilde kullanmak istiyoruz. Bu nedenle, topluluğu da sürece dahil ediyoruz. Aşağıdaki bölümler, değerlendirdiğimiz üç olası sürümü açıklamaya yardımcı olacaktır. Ardından, karşılaştırma için bazı kullanım örneklerini inceleyeceğiz ve sonunda, genel olarak hangisini tercih ettiğinizi soran kısa bir anket olacak.

1. seçenek: @nest

Bu, CSS Nesting 1'de belirtilen mevcut söz dizimidir. Yeni iç içe seçicileri & ile başlatarak ekleme stillerini iç içe yerleştirmenin kolay bir yolunu sunar. Ayrıca, & bağlamını yeni bir seçicinin içine yerleştirmenin bir yolu olarak @nest özelliğini sunar. Örneğin, konuları yalnızca eklemediğiniz durumlarda bu özellikten yararlanabilirsiniz. Esnek ve minimaldir ancak kullanım alanınıza bağlı olarak @nest veya & hatırlamanız gerekir.

2. seçenek: @nest restricted

Bu, iki iç içe yerleştirme yöntemini hatırlama masrafını azaltmak için daha katı bir alternatiftir. Bu kısıtlı söz dizimi yalnızca @nest sonrasında iç içe yerleştirmeye izin verir. Bu nedenle, yalnızca ekleme kolaylığı sağlayan bir kalıp yoktur. Seçimdeki belirsizliği ortadan kaldırır, iç içe yerleştirme için hatırlaması kolay bir yöntem oluşturur ancak kısa ve öz olma özelliğini geleneksel yaklaşım lehine feda eder.

3. seçenek: Köşeli parantezler

@nest Tekliflerle ilgili çift söz diziminden veya fazladan karmaşadan kaçınmak için Miriam Suzanne ve Elika Etemad, ek küme parantezlerine dayanan bir alternatif söz dizimi önerdi. Bu, yalnızca iki ek karakterle ve yeni @ kuralları olmadan söz dizimi netliği sağlar. Ayrıca, iç içe yerleştirilmiş kuralların, gerekli iç içe yerleştirme türüne göre gruplandırılmasına da olanak tanır. Bu sayede, benzer şekilde iç içe yerleştirilmiş birden fazla seçici basitleştirilebilir.

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

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest always

.foo {
  color: #111;

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

parantez

.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 always

.foo {
  color: blue;

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

parantez

.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 always

.foo, .bar {
  color: blue;

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

parantez

.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 fazla düzey

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

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

@nest always

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

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

parantez

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 yerleştirme veya konu değiştirme

@nest

.foo {
  color: red;

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

@nest always

.foo {
  color: red;

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

parantez

.foo {
  color: red;

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

Eşdeğer CSS

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

6. örnek: Doğrudan ve üst öğe yerleştirme yöntemlerinin karıştırılması

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest always

.foo {
  color: blue;

  @nest .bar & {
    color: red;

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

parantez

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

7. örnek: Medya sorgusu iç içe yerleştirme

@nest

.foo {
  display: grid;

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

veya açıkça / genişletilmiş

.foo {
  display: grid;

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

@nest always (is always explicit)

.foo {
  display: grid;

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

parantez

.foo {
  display: grid;

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

veya açıkça / 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;
  }
}

8. örnek: Grupları iç içe yerleştirme

@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 always

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

parantez

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: "Mutfak Lavabosu" adlı karmaşık iç içe yerleştirme grubu

@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 always

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

parantez

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ı

Umarız bu karşılaştırmanın ve değerlendirdiğimiz söz dizimi seçeneklerinin örneklerinin adil olduğunu düşünürsünüz. Lütfen bunları dikkatlice inceleyin ve tercih ettiğinizi aşağıda belirtin. CSS iç içe yerleştirme özelliğini hepimizin kullanacağı ve seveceği bir sözdizimine dönüştürmemize yardımcı olduğunuz için teşekkür ederiz.

Ankete katılın!