CSS Academy · Pelajaran

Penyarangan CSS Bawaan

Tuliskan aturan CSS bersarang tanpa prapemroses menggunakan spesifikasi penyarangan CSS bawaan.

Penyarangan CSS Bawaan adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Penyarangan CSS?

Penyarangan CSS bawaan (standar dasar 2024, semua peramban modern) memungkinkan Anda menulis aturan CSS di dalam aturan lain, mencerminkan sintaks penyarangan yang sebelumnya hanya tersedia di praprosesor Sass/Less. Aturan bersarang secara otomatis mewarisi konteks pemilih induknya.

Sintaks Dasar Penyarangan

Tuliskan pemilih anak di dalam blok aturan induk. Peramban secara otomatis menggabungkan pemilih induk dan anak. & (pemilih penyarangan) secara eksplisit merujuk pada pemilih induk untuk pengubah dan kelas semu.

<div class="card is-active">
  <div class="title">Nested Card Title</div>
  <p>Card body text.</p>
</div>

Pemilih Penyarangan &

& secara eksplisit mewakili pemilih induk dalam aturan bersarang. Gunakan untuk kelas semu (&:hover), elemen semu (&::before), kelas pengubah (&.active), dan pemilih atribut (&[disabled]). Tanpa &, aturan bersarang membuat pemilih turunan.

Penyarangan Elemen Semu

Sarangkan aturan elemen semu secara alami di dalam induknya: .button { &::before { content: ""; } &::after { content: ""; } }. Dengan begitu, semua gaya tombol berada di satu tempat — sehingga pengulangan pemilih yang diperlukan dalam CSS datar dapat dihindari.

Penyarangan Aturan at

Kueri media dan aturan at lainnya dapat disarangkan di dalam aturan (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Gaya responsif berada bersama elemen yang dipengaruhinya, bukan dalam blok kueri media terpisah di akhir berkas.

Spesifisitas Pemilih

Penyarangan tidak mengubah aturan spesifisitas — pemilih gabungan memiliki spesifisitas yang sama seperti jika ditulis secara datar. .card .title yang ditulis secara bersarang atau datar memiliki spesifisitas yang sama (0,2,0). Penyarangan adalah kemudahan sintaks, bukan perubahan spesifisitas.

Turunan Implisit dibandingkan dengan & Eksplisit

Pemilih bersarang tanpa & membuat pemilih turunan: .card { .title {} } dikompilasi menjadi .card .title. Dengan &: .card { &.active {} } dikompilasi menjadi .card.active (tanpa spasi — kelas pengubah, bukan turunan).

BEM dengan Penyarangan Bawaan

Penyarangan bawaan tidak ideal untuk BEM — pemilih .block__element dan .block--modifier berupa teks, dan penyarangan tidak dapat menyusunnya hanya dengan &. Gunakan penyarangan untuk kelas semu dan struktur komponen bersarang, bukan penggabungan teks BEM (yang masih memerlukan praprosesor).

Bermigrasi dari Sass

Sebagian besar sintaks penyarangan Sass identik dengan penyarangan CSS bawaan. Pengecualiannya: Sass mengizinkan penggabungan teks &-modifier (CSS bawaan tidak). Lakukan migrasi dengan memeriksa pola &- atau &__, lalu ratakan aturan khusus tersebut sambil mempertahankan penyarangan lainnya.

Dukungan Peramban

Penyarangan CSS bawaan didukung di Chrome 112+, Firefox 117+, dan Safari 16.5+. Untuk mendukung peramban lama, gunakan PostCSS dengan postcss-nesting untuk mengubah sintaks penyarangan bawaan menjadi CSS datar selama proses pembangunan — sehingga Anda dapat menulis dengan penyarangan bawaan mulai sekarang.

DevTools dan Penyarangan

Chrome DevTools menampilkan aturan bersarang di panel Gaya dalam bentuk bersarangnya. Mengeklik aturan bersarang akan membawa Anda ke lokasi sumber yang benar di panel Sumber. Menelusuri kesalahan CSS bersarang sama jelasnya dengan menelusuri kesalahan CSS datar di DevTools modern.

Uji Pengetahuan

Apa perbedaan antara penyarangan dengan dan tanpa pemilih &?

Ringkasan

Penyarangan CSS bawaan memungkinkan sintaks bersarang mirip Sass dalam CSS biasa. Pemilih & membuat pemilih gabungan untuk kelas semu, elemen semu, dan pengubah. Kueri @media bersarang menempatkan gaya responsif bersama elemennya. PostCSS mengubah penyarangan bawaan untuk peramban lama, sehingga penerapannya dapat dilakukan secara bertahap mulai sekarang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyarangan CSS Bawaan” gratis?

Ya — teks lengkap “Penyarangan CSS Bawaan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyarangan CSS Bawaan”?

Tuliskan aturan CSS bersarang tanpa prapemroses menggunakan spesifikasi penyarangan CSS bawaan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Penyarangan CSS Bawaan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy