Penyebaran CSS

Salah satu fitur preprocessor CSS favorit kami kini di-build ke dalam bahasa: aturan gaya bertingkat.

Adam Argyle

Sebelum menyusun bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah dari satu sama lain. Hal ini menyebabkan pengulangan, kumpulan stylesheet, dan pengalaman penulisan yang tersebar.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Setelah penyematan, pemilih dapat dilanjutkan dan aturan gaya terkait dapat dikelompokkan di dalamnya.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Coba ini di browser.

Penyusunan bertingkat membantu developer dengan mengurangi kebutuhan untuk mengulangi pemilih sekaligus menempatkan aturan gaya secara bersamaan untuk elemen terkait. Hal ini juga dapat membantu gaya cocok dengan HTML yang ditargetkan. Jika komponen .nesting dalam contoh sebelumnya dihapus dari project, Anda dapat menghapus seluruh grup, bukan menelusuri file untuk instance pemilih terkait.

Penetasan dapat membantu: - Pengaturan - Mengurangi ukuran file - Pemfaktoran ulang

Penyusunan bertingkat tersedia mulai Chrome 112 dan juga tersedia untuk dicoba di Pratinjau Teknis Safari 162.

Mulai menggunakan CSS Nesting

Di seluruh postingan ini,sandbox demo berikut digunakan untuk membantu Anda memvisualisasikan pilihan. Dalam status default ini, tidak ada yang dipilih dan semuanya terlihat. Dengan memilih berbagai bentuk dan ukuran, Anda dapat mempraktikkan sintaksis dan melihatnya beraksi.