CSS Nesting Sekarang Bisa Jalan Di Browser

Sebelumnya kalau ingin menggunakan CSS nesting kita harus menggunakan sass atau CSS preprocessor lainnya, nah sekarang sudah support CSS nesting secara native di browser kalian bisa menggunakan nya langsung tanpa harus menggunakan sass atau pun CSS preprocessor lainnya.

CSS nesting tidak support di beberapa browser tetapi sudah support di browser versi terbaru ini beberapa list yang sudah support css nesting

jika browser kalian belum di update di update terlebih dahulu jika ingin menggunakan fitur nesting

Syntax Yang digunakan

Syntax yang digunakan di CSS nesting ini berbeda dengan sass atau yang lainnya, di CSS kita harus menggunakan & di selector nya, contoh nya seperti di bawah ini

.container {

&h1 {
    color:blue;
    }
}

contoh nya seperti ini, nah jika langsung gimana? tidak menggunakan "&", itu tidak akan mendefinisikan sebuah nesting, kalian harus menggunakan "&" syntax
contoh salah ketika meggunakan nesting di CSS native

.container {

    h1 {
    color: blue;
    }
}

ini salah browser tidak akan mendeteksi bahwa ini nesting. Nah jika kalian ingin menggunakan psude class di dalam container sangat mudah kalian bisa langsung sepeti ini

.container {
  &:hover {
     background-color: tomato;
  }
}

simple bukan? nah kalian bisa juga gunakan di tag H1 nya , contoh nya seperti ini

.container {
h1 {
   &:hover {
     color: blue;
   }
 }
}

Nah kalaian jangan terlalu dalam menggunakan nesting karena ini bisa membuat keterbacaan kode kurang baik.
Nah jika kalian ingin ngulik lebih dalam kalian bisa langsung ke dokumentasinya
link : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

Jika kalian ingin belajar tentang PRINSIP SOLID kalian bisa cek ebook saya disini https://lynk.id/aditiyadwiramadani/xKa1vEL