Naming Conventions

Nama class adalah antarmuka internal sebuah tim: markup, CSS, dan JavaScript saling menyebut nama yang sama ribuan kali selama umur proyek. Nama yang buruk — meniru tampilan atau muncul dari keputusan mendadak — membuat pembaca kode harus menebak maksudnya setiap kali membuka file. Karena CSS tidak memiliki compiler yang menegur penamaan, disiplin konvensi adalah satu-satunya penggantinya. Chapter ini membahas tiga prinsip penamaan: nama yang menggambarkan peran, format yang konsisten, dan pola prefiks untuk membedakan jenis class.

Nama Menggambarkan Peran, Bukan Tampilan #

Prinsip pertama: sebut apa fungsinya, bukan seperti apa bentuknya. Class .merah rusak begitu desain berubah menjadi hijau — kita harus mengubah markup atau membiarkan nama yang menyesatkan. Class .peringatan tetap benar pada tema apa pun karena perannya tidak berubah:

/* Nama presentational: cepat ditulis, cepat menyesatkan */
.merah   { color: rgb(185, 28, 28); }

/* Nama fungsional: tahan perubahan desain */
.peringatan { color: rgb(185, 28, 28); }

Cara mengujinya sederhana: baca nama class di markup tanpa melihat CSS. Bila maknanya jelas — .tombol-utama, .kartu-profil, .peringatan — nama tersebut layak dipertahankan. Bila kita terpaksa membuka stylesheet untuk memahami fungsinya, namanya perlu diperbaiki. Rujukan resmi selector ada di MDN: CSS selectors , namun keputusan penamaan sepenuhnya ada di tangan tim kita.

Format yang Konsisten #

Konvensi format yang lazim untuk CSS:

Beberapa alasan teknis mengapa kebab-case dipilih:

1. CSS peka huruf besar-kecil pada selector: .KartuProfil dan .kartuprofil adalah dua class berbeda, sehingga camelCase memperbesar peluang ketidaksengajaan salah tulis.
2. Selaras dengan nama file di section sebelumnya (kartu-profil.css berisi .kartu-profil), sehingga pencarian nama langsung menemukan file dan aturannya.
3. Tanpa trik karakter: underscore atau camelCase mungkin cocok untuk bahasa lain, tetapi di CSS ekosistem tooling umumnya mengharapkan kebab-case.

Konsistensi lebih penting daripada pola terbaik: satu proyek yang memakai satu konvensi lebih mudah dirawat daripada proyek yang mencampur tiga konvensi masing-masing bagus.

Pola Status dan Demo #

Class status seperti .is-aktif biasanya ditulis belakangan dalam stylesheet sehingga dapat menimpa gaya dasar pada specificity yang sama — strategi urutan ini kita pelajari pada Chapter tentang konflik specificity. Demo chapter ini memakai seluruh pola di atas pada satu kartu profil:

.kartu-profil {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 16px;
}
.kartu-profil__nama {
  font-size: 18px;
  font-weight: 700;
}
.tab {
  color: rgb(71, 85, 105);
}
.is-aktif {
  color: rgb(2, 132, 199);
}

Hasil di Browser:

Kartu profil tampil putih dengan sudut melengkung 12px.
Nama "Dewi Lestari" tampil tebal 700 dengan ukuran 18px.
Tab "Ringkasan" berstatus .is-aktif sehingga teksnya biru
rgb(2, 132, 199), mengalahkan warna abu-abu milik .tab.
Pesan .peringatan tampil merah rgb(185, 28, 28).

Mari kita telaah polanya:

1. Baris 1–6 (.kartu-profil): nama kebab-case menggambarkan komponen; satu class inilah akar seluruh gaya kartu.
2. Baris 7–10 (.kartu-profil__nama): prefiks .kartu-profil menegaskan elemen ini milik kartu; garis bawah ganda adalah konvensi BEM yang kita bedah pada Chapter BEM .
3. Baris 11–13 (.tab): gaya dasar menu, tanpa asumsi status.
4. Baris 14–16 (.is-aktif): class status ditulis setelah .tab; pada specificity sama, posisi belakangan membuatnya menang, sehingga JavaScript cukup menambah/menghapus satu class tanpa menyentuh CSS.

Nama yang baik adalah bekal untuk bab berikutnya: component-based CSS memakai nama komponen sebagai akar struktur, dan BEM memformalkan pola prefiks-status di atas menjadi konvensi utuh.