Membantu memilih sintaks untuk Nesting CSS

Kelompok Kerja CSS terus memperdebatkan cara terbaik untuk mendefinisikan nesting di CSS. Dan jika Anda adalah seseorang yang menulis CSS, kami membutuhkan bantuan Anda.

Bersarang adalah fitur alat yang sangat populer seperti Sass. Ini dapat menghemat waktu pengembang web jika tidak dihabiskan untuk menulis pemilih yang sama berulang kali. Dan itu bisa membuat kode lebih bersih dan lebih mudah dipahami.

.class1 
  color: green;

.class1 .class2 
  border: 5px solid black;

.class1 
  color: green;
  .class2 
    border: 5px solid black;
  

Semua orang berharap CSS bersarang dapat menggunakan jenis sintaksis sederhana yang sama seperti yang dilakukan Sass. Itu tidak mungkin, bagaimanapun, karena cara kerja mesin parsing browser. Jika mereka melihat urutan seperti element:pseudomereka akan menguraikan seluruh aturan gaya seolah-olah itu adalah a property: value pernyataan.

Jadi, diskusi panjang dimulai tentang apa yang harus dilakukan. Awal musim panas ini, CSSWG memperdebatkan antara Opsi 1, Opsi 2, dan Opsi 3. Dari jumlah tersebut, Opsi 3 menang. Sejak itu, dua opsi lagi telah diusulkan, Opsi 4 dan Opsi 5. Jika Anda mengingat berbagai detail yang dibahas di 53+ masalah, kesampingkan semua gagasan lama tersebut. Pada titik ini, kami hanya memperdebatkan antara Opsi 3, 4 dan 5, seperti yang dijelaskan dalam artikel ini melalui kumpulan contoh di bawah ini.

Untuk membantu kami memutuskan opsi mana yang akan dipilih, kami ingin Anda membaca contoh ini dan menjawab survei satu pertanyaan.

Silakan lihat contoh-contoh ini, pertimbangkan bagaimana Anda menulis dan mempertahankan style sheet, dan pikirkan secara mendalam tentang sintaks mana yang Anda sukai. Kemudian pilih salah satu yang menurut Anda terbaik.

Dalam ketiga opsi tersebut, file & simbol adalah penanda yang berarti “meletakkan pemilih yang berada di luar sarang [here]”. Sebagai contoh…

.foo 
  & .bar 
    color: blue;
  

.foo .bar 
  color: blue;

.foo 
  .bar & 
    color: blue;
  

.bar .foo 
  color: blue;

Oke?

Dalam banyak contoh berikut, the & adalah opsional. Beberapa pengembang akan menggunakannya karena membantu membuat kode mereka lebih mudah dibaca. Pengembang lain akan memilih untuk mengabaikannya, terutama saat menyalin & menempelkan kode dari konteks yang tidak bersarang. Ketika & ditinggalkan, pemilih luar ditambahkan di awal, sebagai leluhur. (Saat kami mensurvei penulis, pendapat mereka tentang penggunaan opsional & dibagi 50/50.)

Tapi inilah trik utama untuk Opsi 3 (dan hanya Opsi 3) — jika Anda menggunakan pemilih elemen (seperti p, articleatau div), itu & diperlukan. Jika Anda menggunakan pemilih lain, seperti kelas atau ID, Anda dapat memilih untuk meninggalkannya & keluar. Cara termudah untuk mengingat ini: pemilih tidak pernah bisa dimulai dengan huruf. Itu harus dimulai dengan simbol. Beberapa orang di CSSWG yakin ini akan mudah diingat dan dilakukan. Yang lain bertanya-tanya, mengingat bahwa aturan gaya ditempatkan di tempat lain di CSS tidak memiliki batasan sintaksis seperti itu, jika itu akan menimbulkan kebingungan, membuat pengembang tersandung dengan cara yang sulit untuk di-debug.

Saat Anda membandingkan opsi, pikirkan bagaimana seluruh tim Anda akan menangani kode bersarang. Pikirkan tentang bagaimana rasanya menyalin & menempelkan kode dari satu proyek ke proyek lainnya. Opsi mana yang memudahkan pengkodean di dalam dan di luar konteks bersarang? Manakah yang paling memudahkan untuk membaca, menulis, dan mengedit CSS dalam jumlah besar?

Mana yang terbaik untuk masa depan CSS? Ketika orang menulis CSS tiga puluh tahun dari sekarang — lama setelah kebiasaan dan harapan hari ini benar-benar dilupakan, ketika generasi mendatang belum pernah mendengar tentang Sass — opsi apa yang akan membuat penulisan bahasa ini mudah dan elegan?

Pastikan untuk membaca semua contoh. Satu opsi mungkin menonjol sebagai favorit Anda dalam satu contoh, namun memiliki masalah yang tidak Anda sukai di contoh lain.

Membandingkan Pilihan

• Opsi 5: @nest tingkat teratas: Aturan gaya bersarang dideklarasikan dalam at-rule khusus dan independen yang hanya menerima aturan gaya. Deklarasi dapat disarangkan menggunakan & .. .
• Opsi 4: Blok Postfix: Aturan gaya memungkinkan blok opsional kedua setelah blok deklarasi yang hanya berisi aturan gaya.
• Opsi 3: Permulaan non-huruf: Aturan gaya bersarang dapat ditambahkan langsung ke blok deklarasi, tetapi tidak dapat dimulai dengan huruf.

Contoh A: Dasar-Dasar

article 
  font-family: avenir;

article aside 
  font-size: 1rem;

@nest article 
  & 
    font-family: avenir;
  
  aside 
    font-size: 1rem;
  

article 
  font-family: avenir;
 
  aside 
    font-size: 1rem;
  

article 
  font-family: avenir;
  & aside 
    font-size: 1rem;
  

Contoh B: Dengan variasi sintaks

Ada banyak cara berbeda yang disukai pengembang untuk menyusun CSS mereka — menggunakan tab vs spasi, menempatkan tanda kurung pada baris yang sama sebagai aturan atau pada baris terpisah, mengatur aturan dalam urutan tertentu. Ini juga berlaku saat menulis CSS bersarang. Contoh B mengartikulasikan beberapa kemungkinan variasi tentang bagaimana Anda dapat memformat kode bersarang untuk setiap opsi. Ini sepenuhnya terserah preferensi pribadi Anda.

.foo 
  color: red;

.foo .bar 
  color: blue;

.foo p 
  color: yellow;

@nest .foo 
  & 
    color: red;
  
  .bar 
    color: blue;
  
  p 
    color: yellow;
  

@nest .foo 
  color: red; 
  .bar 
    color: blue;
  
  p 
    color: yellow;
  

.foo 
  color: red;
 
  .bar 
    color: blue;
  
  p 
    color: yellow;
  

.foo 
  color: red;  
  .bar 
    color: blue;
  
  p 
    color: yellow;
  

.foo 
  color: red;
  .bar 
    color: blue;
  
  & p 
    color: yellow;
  

.foo 
  color: red;
  & .bar 
    color: blue;
  
  & p 
    color: yellow;
  

Contoh C: Bersarang kembali di dalam pemilih elemen

Ada situasi untuk Opsi 3 di mana hanya menggunakan an & tidak cukup – ketika kita ingin penyeleksi induk direferensikan oleh & datang setelah pemilih bersarang. Karena kita tidak bisa mulai dengan &kita perlu menggunakan sesuatu seperti :is() atau :where() untuk memulai dengan simbol, bukan huruf.

a:hover 
  color: hotpink;

aside a:hover 
  color: red;

@nest a:hover 
  & 
    color: hotpink;
  
  aside & 
    color: red;
  

a:hover 
  color: hotpink;
 
  aside & 
    color: red;
  

a:hover 
  color: hotpink;
  :is(aside) & 
    color: red;
  

Contoh D: Nol deklarasi tanpa sarang + berbagai penyeleksi

:has(img) .product 
  margin-left: 1rem;

:has(img) h2 
  font-size: 1.2rem;

:has(img) > h3 
  font-size: 1rem;

:has(img):hover 
  box-shadow: 10px 10px;

a:has(img) 
  border: none;

@nest :has(img) 
  .product 
    margin-left: 1rem;
  
  h2 
    font-size: 1.2rem;
  
  > h3 
    font-size: 1rem;
  
  &:hover 
    box-shadow: 10px 10px;
  
  a& 
    border: none;
  

:has(img)  
  .product 
    margin-left: 1rem;
  
  h2 
    font-size: 1.2rem;
  
  > h3 
    font-size: 1rem;
  
  &:hover 
    box-shadow: 10px 10px;
  
  a& 
    border: none;
  

:has(img) 
  .product 
    margin-left: 1rem;
  
  & h2 
    font-size: 1.2rem;
  
  > h3 
    font-size: 1rem;
  
  &:hover 
    box-shadow: 10px 10px;
  
  :is(a&) 
    border: none;
  

Contoh E: Bersarang di dalam sarang

table.colortable td 
  text-align: center;

table.colortable td .c 
  text-transform: uppercase;

table.colortable td:first-child,
table.colortable td:first-child + td 
  border: 1px solid black;

table.colortable th 
  text-align: center;
  background: black;
  color: white;

@nest table.colortable 
  @nest td 
    & 
      text-align: center;
    
    .c 
      text-transform: uppercase;
    
    &:first-child,
    &:first-child + td 
       border: 1px solid black;
    
  
  th 
    text-align: center;
    background: black;
    color: white;
  

table.colortable  
  td 
    text-align: center; 
    .c 
      text-transform: uppercase;
    
    &:first-child,
    &:first-child + td 
       border: 1px solid black;
    
  
  th 
    text-align: center;
    background: black;
    color: white;
  

table.colortable 
  & td 
    text-align: center;
    .c 
      text-transform: uppercase;
    
    &:first-child,
    &:first-child + td 
       border: 1px solid black;
    
  
  & th 
    text-align: center;
    background: black;
    color: white;
  

Contoh F: Integrasi dengan Kueri Media

ol, ul 
  padding-left: 1em;


@media (max-width: 30em)
  .type ul,
  .type ol 
    padding-left: 0;
  

@nest ol, ul 
  & 
    padding-left: 1em;
  
  @media (max-width: 30em)
    .type & 
      padding-left: 0;
    
  

ol, ul 
  padding-left: 1em;
 
  @media (max-width: 30em)
    .type & 
      padding-left: 0;
    
  

ol, ul 
  padding-left: 1em;
  @media (max-width: 30em)
    .type & 
      padding-left: 0;
    
  

Contoh G: Integrasi dengan Cascade Layers

@layer base 
  html 
    width: 100%;
  
  @layer support 
    html body 
      min-width: 100%;
    
  

@layer base 
  @nest html 
    & 
      width: 100%;
    
    @layer support 
      body 
        min-width: 100%;
      
    
  

@layer base 
  html 
    width: 100%;
   
    @layer support 
      body 
        min-width: 100%;
      
    
  

@layer base 
  html 
    width: 100%;
    @layer support 
      & body 
        min-width: 100%;
      
    
  

Sekarang setelah Anda memiliki kesempatan untuk menyerap contoh dari tiga opsi, dan mungkin bermain-main dengan beberapa opsi Anda sendiri, mana yang menurut Anda harus menjadi cara penulisan CSS di masa mendatang?

Jika Anda ingin menjelaskan lebih banyak tentang pemikiran Anda, balas @webkit di Twitteratau @[email protected] di Mastodon.

Terima kasih atas tanggapan Anda. Banyak hal yang harus dilakukan dalam mendesain bahasa pemrograman, bukan hanya hasil survei seperti ini. Tetapi mengetahui apa yang dipikirkan pengembang web setelah membaca contoh akan membantu kami dalam diskusi yang sedang berlangsung.

Silakan sampaikan survei ini kepada orang lain yang Anda kenal yang juga menulis CSS, mempostingnya ke media sosial, dan membantu kami menyebarluaskannya. Semakin banyak orang yang menyuarakan pendapatnya, semakin baik.

Kami terutama ingin mendengar dari pengembang yang mengerjakan berbagai macam proyek — mulai dari situs web hingga aplikasi web, aplikasi asli hingga reklame digital hingga buku cetak. Apakah proyek besar dan kecil, tim besar atau kecil, basis kode baru atau puluhan tahun. Dibangun di berbagai kerangka kerja, CMS, sistem bangun… dinamis atau statis, sisi server atau sisi klien yang dirender… ada banyak cara orang menggunakan CSS, di seluruh dunia. Kita perlu mempertimbangkan semuanya.