CSS Nesting Sekarang Sudah Tersedia Dengan Vanilla CSS

CSS (Cascading Style Sheets) adalah komponen dasar developeran web. Ini bertanggung jawab untuk mengatur Style halaman web, membuatnya terlihat menarik secara visual dan profesional. Pada bulan September 2019, W3C (World Wide Web Consortium) memperkenalkan fitur nesting CSS baru yang menyederhanakan cara kami menerapkan Style ke halaman web kami. Dalam postingan blog ini, kita akan mengeksplorasi fitur baru ini dan bagaimana fitur ini dapat meningkatkan pengalaman CSS Vanilla.

Struktur CSS Sederhana

Salah satu manfaat utama dari fitur nesting CSS yang baru adalah menyederhanakan struktur CSS. Dengan fitur ini, kita sekarang dapat nesting Style satu sama lain, mengurangi kesalahan yang datang dari pendekatan CSS tradisional. Misalnya, langkah menulis:

.navbar {
  background-color: #333;
}

.navbar ul {
  list-style: none;
}

.navbar ul li {
  display: inline-block;
}

.navbar ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

Sekarang kita dapat menulis:

.navbar {
  background-color: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
      }
    }
  }
}

Seperti yang Anda lihat, fitur nesting memungkinkan kita untuk mengelompokkan Style terkait bersama-sama, membuat kode lebih bersih dan lebih tertata.

Keterbacaan yang lebih baik

Fitur nesting CSS baru meningkatkan keterbacaan kode. nesting memungkinkan developer untuk dengan mudah pahami hubungan di antara Style yang lain. Lebih mudah untuk melihat Style yang mana berlaku untuk komponen mana, membuat lebih mudah untuk memelihara dan mengupdate kode. Ini kurangi peluang kesalahan dalam kode karena Style dikelompokkan bersama dengan logis.

Kompatibilitas dengan Vanilla CSS

Fitur nesting CSS yang baru cocok dengan Vanilla CSS, yang artinya kita tidak harus menggunakan preprosesor seperti Sass atau Less untuk manfaatkan fitur ini. Kami saat ini bisa menulis CSS nesting di Vanilla CSS, membuat lebih mudah serta lebih gampang diakses oleh developer yang baru mengawali peningkatan situs.

Apa CSS nesting Siap Digunakan?

Namun, CSS Nesting adalah peningkatan besar untuk Vanilla CSS, belum kompatibel dengan semua browser. Jadi, jangan lupa untuk memeriksa situs web Can I Use sebelum menggunakannya di proyek Anda berikutnya!

Kesimpulan

Fitur nesting CSS baru menyederhanakan struktur CSS, meningkatkan keterbacaan kode, dan kompatibel dengan CSS Vanilla. Ini merupakan tambahan yang disambut baik untuk komunitas developeran web, dan kami berharap untuk melihatnya lebih sering digunakan di masa mendatang. Sebagai developer, penting untuk selalu mengikuti perkembangan fitur dan teknologi baru, dan fitur nesting CSS yang baru adalah contoh yang sangat baik tentang bagaimana kami dapat meningkatkan alur kerja developer.