Arsitektur CSS

Stylesheet yang terus bertambah seiring tumbuhnya proyek menuntut kesepakatan tertulis tentang cara menamai dan mengelompokkan aturan. Topik ini membahas masalah yang muncul ketika stylesheet membesar tanpa aturan main, konvensi penamaan BEM beserta contoh kartu catatan, pendekatan utility-first yang diperkenalkan melalui Tailwind, serta pertimbangan memilih strategi berdasarkan ukuran tim dan umur proyek. Setelah topik ini dibaca, pilihan strategi penamaan dapat ditetapkan secara sadar, bukan mengikuti kebiasaan yang tumbuh tanpa arah.

Masalah stylesheet yang membesar#

Stylesheet tanpa kesepakatan penamaan umumnya berkembang menjadi kumpulan aturan yang saling berebut. Selector dibuat semakin panjang untuk mengalahkan aturan lama, penanda !important bermunculan untuk memaksa hasil, dan aturan lama tidak berani dihapus karena tidak jelas aturan mana yang masih digunakan. Kondisi ini dikenal sebagai perang specificity yang membuat setiap perubahan tampilan semakin berisiko.

Akar masalahnya bukan pada jumlah aturan, melainkan pada hilangnya batas antar komponen. Nama class yang menggambarkan tampilan, misalnya .teks-merah, tidak memberi tahu bagian mana yang menjadi pemiliknya, sehingga aturan untuk keperluan yang berbeda mudah bertabrakan. Perubahan satu aturan pun dapat merusak halaman lain yang tanpa sengaja menggunakan class yang sama.

Dampaknya terasa pada kecepatan kerja tim. Penambahan fitur baru menuntut pembacaan seluruh stylesheet untuk memastikan tidak ada yang terganggu, dan kasus gaya yang tidak berlaku semakin sering terjadi. Konvensi arsitektur hadir untuk memulihkan batas tersebut, yaitu dengan menetapkan cara menamai, cara mengelompokkan, dan cara mengganti gaya.

Konvensi penamaan sebagai komunikasi#

Nama class adalah sarana komunikasi di dalam tim, karena nama yang sama dibaca berulang kali oleh orang yang berbeda. Nama yang baik menggambarkan peran atau struktur komponen yang diberi nama, bukan tampilannya pada satu titik waktu. Nama .tombol--batal tetap benar meskipun warnanya kelak berubah menjadi biru, sedangkan .tombol-merah langsung keliru begitu desainnya berubah.

Konvensi penamaan juga menjawab pertanyaan yang sering muncul saat menyunting, yaitu aturan mana yang boleh diubah dan aturan mana yang digunakan bersama. Nama yang terbaca dengan jelas memperlihatkan batas komponen tanpa perlu membuka seluruh berkas. Karena itulah strategi arsitektur CSS pada intinya berupa konvensi penamaan yang disepakati dan dijaga.

Penamaan yang konsisten juga mengurangi duplikasi. Nama yang terstruktur memudahkan pencarian aturan yang sudah ada untuk keperluan serupa sebelum class baru dibuat. Duplikasi yang terhindar berarti jumlah aturan yang harus dipelihara ikut menyusut.

BEM: block, element, modifier#

BEM, kependekan dari Block, Element, Modifier, adalah konvensi penamaan yang membagi antarmuka menjadi tiga peran. Block adalah komponen yang berdiri sendiri seperti kartu, element adalah bagian di dalamnya yang tidak berdiri sendiri, dan modifier adalah varian atau keadaan. Namanya ditulis dengan pola block__element--modifier, sehingga asal suatu class dapat dibaca langsung dari namanya.

.kartu { }

.kartu__judul {
  margin: 0 0 6px;
  font-size: 14px;
}

.kartu__isi {
  margin: 0;
  font-size: 13px;
}

.kartu--unggulan {
  border-color: #1d4ed8;
}

<article class="kartu kartu--unggulan">
  <h2 class="kartu__judul">Cascade</h2>
  <p class="kartu__isi">Urutan sumber menentukan pemenang saat deklarasi bertentangan.</p>
</article>

Nama pada contoh tersebut langsung memperlihatkan strukturnya, yaitu kartu dengan judul dan isi, serta satu varian bernama unggulan. Seluruh selector BEM berupa satu class, sehingga bobot specificity-nya rendah dan seragam. Keseragaman ini mencegah perang specificity karena tidak ada selector bersarang yang bobotnya melebihi selector lain, dan penggantian gaya cukup dilakukan pada satu class.

Kelebihan lain BEM adalah keterbacaannya pada markah. Class yang tertera pada elemen langsung menjelaskan posisi elemen itu di dalam komponen, sehingga pemeriksaan di DevTools maupun penyuntingan markah menjadi lebih cepat. Biayanya, nama class menjadi panjang dan markah harus dijaga konsistensinya, terutama pada komponen bertingkat.

Pendekatan utility-first#

Pendekatan utility-first memecah gaya menjadi class utilitas yang masing-masing menerapkan tepat satu deklarasi, misalnya satu class untuk padding dan satu class untuk warna teks. Antarmuka dirakit dengan menggabungkan class utilitas tersebut langsung pada markah. Tailwind CSS adalah implementasi yang paling dikenal dari pendekatan ini.

<button class="rounded-md bg-blue-700 px-4 py-2 text-sm text-white">
  Simpan catatan
</button>

Pada contoh di atas, setiap class menangani satu hal, yaitu sudut membulat, warna latar, padding, ukuran huruf, dan warna teks. Manfaat pendekatan ini adalah stylesheet yang tetap ringkas karena aturan tidak bertambah setiap komponen baru dibuat, serta tidak ada nama komponen yang harus diputuskan. Konsekuensinya, markah menjadi lebih ramai dan terikat pada kosakata class milik kerangka kerja yang dipilih.

Pendekatan utility-first dan konvensi penamaan semacam BEM sesungguhnya memindahkan letak keputusan gaya, yaitu dari stylesheet ke markah. Keduanya mengurangi gaya yang tidak terpakai dengan caranya masing-masing, dan keduanya menuntut disiplin agar kombinasi class tetap terbaca. Posisi yang berimbang adalah memandang keduanya sebagai pilihan rancangan, bukan sebagai pengganti pemahaman cascade dan specificity.

Memilih strategi#

Pilihan strategi paling tepat bergantung pada ukuran tim dan umur proyek. Tabel berikut menyandingkan kedua pendekatan pada beberapa aspek praktis. Aspek yang disandingkan adalah letak keputusan gaya, pertumbuhan stylesheet, dan bentuk markahnya.

Tim yang besar dan proyek berumur panjang memperoleh manfaat terbesar dari konvensi yang ketat, karena konsistensi penamaan memudahkan anggota baru membaca kode yang ditulis orang lain. Proyek kecil yang cepat berubah nyaman menggunakan utilitas karena keputusan penamaan dihilangkan. Pada praktiknya, keduanya dapat berdampingan, misalnya konvensi BEM untuk komponen inti dan class utilitas untuk penyesuaian kecil antar komponen.

Ringkasan#

• Stylesheet yang membesar tanpa kesepakatan menghasilkan perang specificity, penumpukan !important, dan aturan yang tidak berani dihapus.
• BEM menamai komponen dengan pola block__element--modifier, sehingga nama memperlihatkan struktur dan specificity tetap rendah serta seragam.
• Pendekatan utility-first menggabungkan class satu tujuan langsung pada markah, dengan Tailwind sebagai implementasi yang dikenal luas.
• Strategi dipilih berdasarkan ukuran tim dan umur proyek, dan keduanya dapat berdampingan dengan pembagian tugas yang jelas.

Referensi#

• Get BEM — komunitas BEM — Ringkasan metodologi BEM beserta aturan penamaan block, element, dan modifier.
• Tailwind CSS — Tailwind Labs — Situs resmi kerangka kerja utility-first yang memuat pendekatan class utilitasnya.
• Learn CSS — web.dev — Kursus resmi CSS yang mencakup pengorganisasian dan pemeliharaan gaya.