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

İki rekabet halindeki söz dizimi arasından hangisinin bir özellik adayı olarak destekleneceğini belirlemek için yardımınıza ihtiyacımız var.

Adam Argyle

Miriam Suzanne

CSS iç içe yerleştirme, CSS'nin bir kural kümesinin içine eklenmesine olanak tanıyan bir söz dizimi eklentisidir. SCSS, Less veya Stylus kullandıysanız bu türden birkaç örnekle karşılaşmışsınızdır:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Bu kod, önişleyici tarafından normal CSS olarak 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 dizimi için resmi bir CSS sürümü üzerinde ciddi şekilde düşünüyoruz. Tercihlerimiz konusunda bölünmüş durumdayız ve bu konuda topluluğun yardımını almak istiyoruz. Bu yayının geri kalanında, sonunda ankete katılmak için bilgi sahibi olabilmeniz amacıyla söz dizimi seçenekleri tanıtılacaktır.

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

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

1. Anlamsız ayrıştırma
   Bazı iç içe yerleştirilmiş seçiciler tam olarak mülklere benzeyebilir ve önişleyiciler bunları derleme sırasında çözebilir ve yönetebilir. Tarayıcı motorları aynı olanakları sunmaz. Seçicilerin hiçbir zaman gevşek bir şekilde yorumlanmaması gerekir.
   

2. Ön işlemci ayrıştırma anlaşmazlıkları
   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, söz konusu ekosistemler ve topluluklar için rahatsız edici ve saygısızca bir davranış olur.
   

3. :is() için bekleme
   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. Örnek'e bakın. Seçici listesinin başlangıçta değil de bir seçicinin ortasında olduğunu varsayalım. Bu gibi durumlarda, seçicileri başka bir seçicinin ortasında gruplandırmak için :is() gerekir.
   

Karşılaştırdığımız bilgilere genel bakış

CSS iç içe yerleştirme özelliğini doğru şekilde uygulamak istiyoruz ve bu nedenle topluluğu da sürece dahil ediyoruz. Aşağıdaki bölümlerde, değerlendirdiğimiz üç olası sürüm açıklanmaktadır. Ardından, karşılaştırma için bazı kullanım örneklerini inceleyeceğiz. Sonunda, genel olarak hangisini tercih ettiğinizi soran kısa bir anket yer alacak.

1. seçenek: @nest

Bu, CSS İç İçe Yerleştirme 1'de şu anda belirtilen söz dizimidir. Yeni iç içe yerleştirilmiş seçicileri & ile başlatarak stil eklemeyi iç içe yerleştirmek için kullanışlı bir yol sunar. Ayrıca, yalnızca özne eklemediğiniz durumlarda & bağlamını yeni bir seçicinin herhangi bir yerine yerleştirmek için @nest seçeneğini de sunar. Esnek ve minimaldir ancak kullanım alanınıza bağlı olarak @nest veya & değerini hatırlamanız gerekir.

2. seçenek: @nest restricted

Bu, iki iç içe yerleştirme yöntemini hatırlamayla ilgili belirtilen maliyeti azaltmak için daha katı bir alternatiftir. Bu kısıtlanmış söz dizimi yalnızca @nest'ten sonra iç içe yerleştirmeye izin verdiğinden, yalnızca ekleme kolaylığı sağlayan bir kalıp yoktur. Seçim belirsizliğini ortadan kaldırır, iç içe yerleştirme için hatırlaması kolay bir yol oluşturur ancak kısalık yerine geleneklerden ödün verir.

Not: Daha az kısıtlanmış @nest söz diziminde (1. Seçenek), belirsizliği veya kısalığı sevmemeleri durumunda ekip genelinde bir kullanım kuralını zorunlu kılmak için bir dil bilgisi denetimi aracının kullanılabileceğini belirtmek isteriz. Spesifikasyonu değiştirmek uç bir önlem olabilir.

3. Seçenek: Köşeli parantez

@nestTekliflerle ilgili çift söz dizimi veya ek dağınıklığı önlemek için Miriam Suzanne ve Elika Etemad, bunun yerine ek köşeli parantezler kullanan bir alternatif söz dizimi önerdi. Bu, yalnızca iki ek karakterle ve yeni at-kuralları olmadan söz dizimi netliği sağlar. Ayrıca, benzer şekilde iç içe yerleştirilmiş birden fazla seçiciyi basitleştirmek için 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.

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 çok 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: Ebeveynin iç içe yerleştirilmesi veya öznenin değiştirilmesi

@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 iç içe yerleştirmeyi karıştırma

@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 / uzatılmış

.foo {
  display: grid;

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

@nest always (her zaman açıktır)

.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 / uzatılmış

.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: Örtülü iç içe yerleştirme adı verilen bir kolaylık söz dizimi vardır. Her örnekteki üst/ilk örneklerde, stil kurallarının kapsamının, iç içe yerleştirildikleri örtük seçici kapsamına uygulandığı örtük iç içe yerleştirme özelliği gösterilmektedir. Birden fazla iç içe yerleştirilmiş seçicinin olması gerektiğinde, gizli iç içe yerleştirmenin ayarlanması gerekir. Bu noktada, açık iç içe yerleştirme stiline göre yeniden yapılandırmanız gerekir.

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

Örnek 9 - "Mutfak Lavabosu" karmaşık iç içe gruplandırması

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

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

Ankete katılın.