Membantu memilih sintaksis untuk penyusunan bertingkat CSS

Dua sintaks yang bersaing memerlukan bantuan Anda dalam menentukan sintaks yang harus diperjuangkan ke kandidat spesifikasi.

Adam Argyle

Twitter GitHub

Miriam Suzanne

Twitter

Penyusunan CSS bertingkat adalah tambahan sintaksis praktis yang memungkinkan CSS ditambahkan di dalam kumpulan aturan. Jika telah menggunakan SCSS, Less, atau Stylus, Anda pasti pernah melihat beberapa rasa:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Setelah dikompilasi ke CSS reguler oleh preprocessor, berubah menjadi CSS biasa seperti ini:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Versi CSS resmi dari sintaksis ini sangat dipertimbangkan dan kami memiliki pembagian preferensi, yakni kami ingin menggunakan bantuan komunitas untuk memecahkan ikatan. Bagian selanjutnya dari postingan ini akan memperkenalkan opsi sintaksis sehingga Anda akan merasa mendapat informasi untuk mengikuti survei di akhir.

Mengapa contoh penyusunan bertingkat yang ditampilkan di atas tidak menjadi sintaksis untuk penyusunan bertingkat CSS?

Ada beberapa alasan mengapa sintaksis {i>nesting <i}yang paling populer tidak dapat digunakan sebagaimana mestinya:

1. Penguraian ambigu
   Beberapa pemilih bertingkat dapat terlihat persis seperti properti dan praprosesor dapat me-resolve dan mengelolanya pada waktu build. Mesin browser tidak akan memiliki kemampuan yang sama, pemilih tidak boleh dapat ditafsirkan secara bebas.
   

2. Konflik penguraian praprosesor
   Cara CSS bertingkat tidak boleh merusak prepemroses atau alur kerja bertingkat developer yang ada. Hal ini akan mengganggu dan tidak memperhitungkan ekosistem dan komunitas tersebut.
   

3. Menunggu :is()
   Penyusunan bertingkat dasar tidak memerlukan :is(), tetapi pembuatan bertingkat yang lebih kompleks. Lihat Contoh #3 untuk pengantar singkat tentang daftar pemilih dan penyusunan bertingkat. Bayangkan daftar pemilih berada di tengah-tengah pemilih, bukan di awal, dalam kasus tersebut, :is() diperlukan untuk mengelompokkan pemilih di tengah-tengah pemilih.
   

Ringkasan tentang apa yang kami bandingkan

Kami ingin CSS disusun dengan benar, dan dengan semangat tersebut, kami menyertakan komunitas. Bagian berikut akan membantu menjelaskan tiga kemungkinan versi yang kami evaluasi. Kemudian, kita akan membahas beberapa contoh penggunaan sebagai perbandingan, dan di akhir akan ada survei ringan yang menanyakan mana yang lebih Anda sukai.

Opsi 1: @nest

Ini adalah sintaksis yang ditentukan saat ini dalam CSS Nesting 1. Elemen ini menawarkan cara mudah untuk menyusun bertingkat gaya dengan memulai pemilih bertingkat baru menggunakan &. Kode ini juga menawarkan @nest sebagai cara untuk menempatkan konteks & di mana saja dalam pemilih baru, seperti saat Anda tidak hanya menambahkan subjek. Cara ini fleksibel dan minimal, tetapi Anda harus mengingat @nest atau &, bergantung pada kasus penggunaan Anda.

Opsi 2: @nest dibatasi

Ini adalah alternatif yang lebih ketat, sebagai upaya untuk mengurangi biaya yang disebutkan dalam mengingat dua metode penyusunan bertingkat. Sintaksis yang dibatasi ini hanya memungkinkan pembuatan bertingkat setelah @nest, sehingga tidak ada penambahan pola kenyamanan saja. Menghilangkan ambiguitas pilihan, membuat satu cara yang mudah diingat untuk menyusun bertingkat, tetapi mengorbankan keterbatasan untuk mendukung konvensi.

Catatan: Perlu diperhatikan bahwa sintaksis @nest yang tidak terlalu dibatasi (Opsi 1) dapat menggunakan linter untuk menerapkan aturan penggunaan di seluruh tim, jika mereka bersama-sama memutuskan bahwa mereka tidak menyukai ambiguitas atau keringkasannya. Mengubah spesifikasi dapat menjadi tindakan yang ekstrem.

Opsi 3: Tanda Kurung

Untuk menghindari sintaksis ganda atau kekacauan tambahan yang terlibat dalam proposal @nest, Miriam Suzanne dan Elika Etemad mengusulkan sintaksis alternatif yang mengandalkan tanda kurung kurawal tambahan. Hal ini memberikan kejelasan sintaksis, hanya dengan dua karakter tambahan, dan tidak ada aturan baru. Hal ini juga memungkinkan aturan bertingkat dikelompokkan menurut jenis tingkatan yang diperlukan, sebagai cara untuk menyederhanakan beberapa pemilih bertingkat yang serupa.

Contoh 1 - Penyusunan langsung

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest selalu

.foo {
  color: #111;

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

tanda kurung

.foo {
  color: #111;

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

CSS yang setara

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

Contoh 2 - Penyusunan gabungan

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest selalu

.foo {
  color: blue;

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

tanda kurung

.foo {
  color: blue;

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

CSS yang setara

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

Contoh 3 - Daftar pemilih dan tingkatan

@nest

.foo, .bar {
  color: blue;

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

@nest selalu

.foo, .bar {
  color: blue;

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

tanda kurung

.foo, .bar {
  color: blue;

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

CSS yang setara

.foo, .bar {
  color: blue;
}

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

Contoh 4 - Beberapa level

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

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

@nest selalu

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

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

tanda kurung

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

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

CSS yang setara

figure {
  margin: 0;
}

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

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

Contoh 5 - Induk bertingkat atau perubahan subjek

@nest

.foo {
  color: red;

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

@nest selalu

.foo {
  color: red;

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

tanda kurung

.foo {
  color: red;

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

CSS yang setara

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

Contoh 6 - Mencampur penyusunan bertingkat langsung dan induk

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest selalu

.foo {
  color: blue;

  @nest .bar & {
    color: red;

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

tanda kurung

.foo {
  color: blue;

  {
    .bar & {
      color: red;

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

CSS yang setara

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

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

Contoh 7 - Penyusunan kueri media

@nest

.foo {
  display: grid;

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

atau secara eksplisit / diperluas

.foo {
  display: grid;

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

@nest selalu (selalu eksplisit)

.foo {
  display: grid;

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

tanda kurung

.foo {
  display: grid;

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

atau secara eksplisit / diperluas

.foo {
  display: grid;

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

CSS yang setara

.foo {
  display: grid;
}

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

Catatan: Ada sintaksis praktis yang disebut tingkatan implisit. Contoh teratas/pertama di setiap contoh menunjukkan fitur bertingkat implisit, tempat cakupan aturan gaya diterapkan ke cakupan pemilih implisit tempat bertingkat di dalamnya. Penyusunan bertingkat implisit perlu penyesuaian ketika perlu ada lebih dari satu pemilih bertingkat, yang pada saat itu Anda perlu melakukan pemfaktoran ulang ke gaya bertingkat eksplisit.

Contoh 8 - Grup bertingkat

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

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

tanda kurung

fieldset {
  border-radius: 10px;

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

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

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

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

CSS yang setara

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

Contoh 9 - Grup bertingkat kompleks "Wastafel Dapur"

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

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

tanda kurung

dialog {
  border: none;

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

    & > form {
      display: grid;

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

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

CSS yang setara

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

Waktunya memberikan suara

Semoga ini merupakan perbandingan yang adil dan contoh dari opsi sintaksis yang kami evaluasi. Harap tinjau dengan cermat dan beri tahu kami mana yang Anda pilih di bawah. Terima kasih telah membantu kami meningkatkan penyusunan bertingkat CSS ke sintaksis yang akan kita kenal dan sukai.

Ikuti survei.