Selamat Tinggal SASS? CSS Nesting dan :has() Kini Native di Browser

Era Kebangkitan CSS Murni (Vanilla CSS)

Jika kamu pernah membaca tutorial lawas tentang cara menulis CSS yang rapi, semua pakar akan menyuruhmu menggunakan Preprocessor seperti SASS/SCSS agar kamu bisa menulis CSS bersarang (Nesting) dan menggunakan variabel. SASS adalah alat yang brilian, tapi butuh proses *Compile* (Build Step) yang memakan waktu.

Kini, SASS mulai ditinggalkan perlahan-lahan. Mengapa? Karena panitia pengembang web global (W3C) secara perlahan memasukkan semua fitur ajaib SASS tersebut ke dalam standar bawaan (Native) CSS yang langsung dipahami oleh Chrome dan Safari!

1. Fitur CSS Nesting Resmi Bawaan

Ya, sejak 2024, kamu tidak perlu lagi meng-install SCSS hanya untuk menulis gaya yang menjorok ke dalam! CSS murni (file .css biasa) kini sudah sepenuhnya mengerti sintaks kurung kurawal berlapis.

/* Kode ini dulu cuma bisa jalan di SCSS, TAPI sekarang JALAN DI CSS MURNI! */
.kartu-artikel {
  background-color: white;
  padding: 20px;

  /* Nesting Element Anak langsung di dalamnya */
  .judul {
    color: blue;
    font-size: 24px;
  }

  /* Ampersand (&) untuk Pseudo-class */
  &:hover {
    box-shadow: 0 4px 8px gray;
  }
}

Bayangkan seberapa bersih dan cepatnya proyek *Frontend*-mu tanpa perlu Compiler pihak ketiga!

2. Revolusi Selector ':has()' (Parent Selector)

Selama 20 tahun lebih, satu kelemahan terbesar CSS adalah arahnya yang kaku. Di CSS, elemen Induk bisa memberi warna elemen Anaknya. TAPI, elemen Induk tidak bisa berubah gaya berdasarkan Anaknya. (Kita biasa menggunakan JavaScript murni untuk mengakali ini).

Semuanya berubah dengan kedatangan sang Game Changer: *Selector* :has().

/* Memilih dan Mewarnai si Kartu Utama (INDUK) ... */
/* TAPI, dengan SYARAT: Jika di DALAM kartu ini terdapat (has) sebuah gambar yang sedang di-Hover! */

.kartu-utama:has(img:hover) {
  border: 5px solid red;
  background-color: yellow;
}

Dulu, membuat interaksi kompleks (di mana sebuah kotak berubah warna jika form di dalamnya sedang aktif/diketik) memaksa kita menggunakan State React. Kini, kamu cukup menggunakan trik sulap CSS :has() murni untuk menghemat jutaan baris kode *JavaScript Component*-mu!