Penyarangan CSS Asli

Penyusunan bersarang CSS asli (garis dasar 2024, semua pelayar moden) membolehkan penulisan peraturan CSS di dalam peraturan lain, dengan mencerminkan sintaks penyusunan bersarang yang sebelum ini hanya tersedia dalam prapemproses Sass/Less. Peraturan bersarang mewarisi konteks pemilih induk secara automatik.

Tulis pemilih anak di dalam blok peraturan induk. Pelayar menggabungkan pemilih induk dan anak secara automatik. & (pemilih penyusunan bersarang) merujuk pemilih induk secara eksplisit untuk pengubah suai dan kelas pseudo.

& mewakili pemilih induk secara eksplisit dalam peraturan bersarang. Gunakannya untuk kelas pseudo (&:hover), elemen pseudo (&::before), kelas pengubah suai (&.active) dan pemilih atribut (&[disabled]). Tanpa &, peraturan bersarang menghasilkan pemilih turunan.

Sarangankan peraturan elemen pseudo secara semula jadi di dalam induk: .button { &::before { content: ""; } &::after { content: ""; } }. Cara ini meletakkan semua gaya butang bersama-sama dan mengelakkan pengulangan pemilih yang diperlukan dalam CSS rata.

Pertanyaan media dan peraturan-@ lain boleh disarangankan di dalam peraturan (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Gaya responsif berada bersama elemen yang dipengaruhinya, bukannya dalam blok pertanyaan media berasingan di penghujung fail.

Penyusunan bersarang tidak mengubah peraturan kekhususan — pemilih gabungan mempunyai kekhususan yang sama seperti jika ditulis secara rata. .card .title yang ditulis secara bersarang atau rata mempunyai kekhususan yang sama (0,2,0). Penyusunan bersarang ialah kemudahan sintaks, bukan perubahan kekhususan.

Pemilih bersarang tanpa & menghasilkan pemilih turunan: .card { .title {} } disusun menjadi .card .title. Dengan &: .card { &.active {} } disusun menjadi .card.active (tiada ruang — kelas pengubah suai, bukan turunan).

Penyusunan bersarang asli tidak begitu sesuai untuk BEM — pemilih .block__element dan .block--modifier ialah rentetan, dan penyusunan bersarang tidak dapat membinanya hanya dengan &. Gunakan penyusunan bersarang untuk kelas pseudo dan struktur komponen bersarang, bukannya penggabungan rentetan BEM (yang masih memerlukan prapemproses).

Kebanyakan sintaks penyusunan bersarang Sass adalah serupa dengan penyusunan bersarang CSS asli. Pengecualian: Sass membenarkan penggabungan rentetan &-modifier, manakala CSS asli tidak. Berpindahlah dengan menyemak corak &- atau &__ dan meratakan peraturan khusus tersebut sambil mengekalkan penyusunan bersarang yang lain.

Penyusunan bersarang CSS asli disokong dalam Chrome 112+, Firefox 117+ dan Safari 16.5+. Untuk sokongan pelayar lama, gunakan PostCSS dengan postcss-nesting bagi mengubah sintaks penyusunan bersarang asli kepada CSS rata semasa binaan, supaya anda boleh menulis dengan penyusunan bersarang asli hari ini.

Chrome DevTools memaparkan peraturan bersarang dalam panel Styles dalam bentuk bersarangnya. Mengklik peraturan bersarang membawa anda ke lokasi sumber yang betul dalam panel Sources. Penyahpepijatan CSS bersarang adalah sejelas penyahpepijatan CSS rata dalam DevTools moden.

Penyusunan bersarang CSS asli membolehkan sintaks bersarang seperti Sass dalam CSS biasa. Pemilih & menghasilkan pemilih gabungan untuk kelas pseudo, elemen pseudo dan pengubah suai. Pertanyaan @media bersarang meletakkan gaya responsif bersama elemennya. PostCSS mengubah penyusunan bersarang asli untuk pelayar lama, lalu membolehkan penggunaannya secara berperingkat hari ini.