Dua sintaks yang bersaing memerlukan bantuan Anda dalam menentukan sintaks yang harus diperjuangkan ke kandidat spesifikasi.
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:
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.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.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.
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;
}
}
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.