Naming Conventions

Proyek CSS yang masih kecil bisa ditata dengan nama apa pun, tetapi begitu jumlah berkas dan anggota tim bertambah, nama class menjadi satu-satunya peta untuk menemukan kode. Nama yang konsisten membuat kita dapat menebak isi sebuah aturan sebelum membukanya, membedakan komponen dari variasinya, dan menghindari penulisan ulang aturan yang sudah ada. Pada chapter ini kita meninjau beberapa konvensi penamaan yang populer, merinci pola BEM sebagai yang paling sering dijumpai, lalu menerapkan disiplin yang sama pada penamaan custom property.

Mengapa Penamaan Menentukan Skala Proyek #

CSS tidak membawa struktur modular secara bawaan: semua aturan global, dan satu class dapat dipakai di mana saja. Satu-satunya alat organisasi yang selalu melekat pada kode adalah nama. Nama yang baik menyampaikan tugas, bukan tampilan, sehingga informasi berikut langsung terbaca:

Perhatikan bahwa tidak ada satu pun nama yang merujuk tampilan seperti warna atau posisi. Tampilan berubah saat redesign; peran sebuah komponen jauh lebih stabil.

BEM: Block, Element, Modifier #

BEM adalah konvensi penamaan yang paling luas dipakai. Polanya membagi komponen menjadi tiga peran:

• Block: komponen yang berdiri sendiri, misalnya .kartu atau .nav-utama.
• Element: bagian dalam blok yang tidak bermakna tanpa bloknya, ditulis dengan dua garis bawah: .kartu__judul.
• Modifier: variasi atau state dari blok maupun elemen, ditulis dengan dua tanda hubung: .kartu--unggulan.

Contoh lengkapnya seperti ini:

.kartu {
  border: 1px solid #d7e3dc;
  border-radius: 12px;
  padding: 16px;
}

.kartu__judul {
  font-size: 18px;
  margin-top: 0;
}

.kartu__tindakan {
  margin-top: 12px;
}

.kartu--unggulan {
  background-color: #eef6f1;
  border-color: #14503a;
}

Markup-nya mengikuti pola yang sama:

<article class="kartu kartu--unggulan">
  <h3 class="kartu__judul">Paket Pengembang</h3>
  <p class="kartu__isi">Akses penuh ke seluruh materi course.</p>
  <div class="kartu__tindakan">
    <button type="button" class="tombol tombol--utama">Berlangganan</button>
  </div>
</article>

Demo berikut menampilkan dua kartu yang dibangun atas pola BEM. Kartu kedua menambahkan modifier --unggulan pada blok dan --penuh pada tombolnya:

Tidak ada satu pun selector bertingkat; semua perbedaan datang dari tambahan class.

Keuntungan terbesar BEM ada di sisi specificity. Setiap selector di atas hanya memakai satu class, sehingga bobotnya seragam (0, 1, 0) dan urutan penulisan menjadi penentu utama. Kita menghindari selector bertingkat seperti .kartu h3 .judul yang membuat override sulit diprediksi.

Konvensi Lain yang Sering Dijumpai #

Ketiganya mengarah ke tujuan yang sama: membatasi cakupan setiap aturan dan membuat nama mudah ditebak. Tidak ada satu pemenang mutlak; banyak proyek memakai kombinasi, misalnya BEM untuk komponen dan prefix is- untuk state. Pilih sesuai kebutuhan tim, bukan karena satu konvensi sedang populer.

Menamai Custom Property #

Disiplin yang sama berlaku untuk custom property. Token global di :root lazim memakai pola --kategori-nama sehingga kelompoknya terbaca saat autocomplete: --warna-teks, --jarak-konten, --radius-kartu. Variabel yang hanya dipakai satu komponen diberi awalan nama bloknya agar tidak bertabrakan dengan token lain:

:root {
  --warna-teks: #1f2933;
  --jarak-konten: 16px;
  --radius-kartu: 12px;
}

.kartu {
  --kartu--latar: #ffffff;
  background-color: var(--kartu--latar);
  padding: var(--jarak-konten);
  border-radius: var(--radius-kartu);
}

Pola --kartu--latar meniru BEM: siapa pun yang menemukan variabel ini di aturan lain langsung tahu bahwa variabel itu milik komponen kartu, bukan token global.

Pilih Satu, Lalu Teguh #

Konvensi terbaik bukan yang paling populer, melainkan yang dipatuhi seluruh tim sampai selesai. Campuran dua konvensi dalam satu berkas lebih merugikan daripada konvensi sederhana yang konsisten. Kesalahan yang sering terjadi:

Saat bergabung dengan proyek yang sudah berjalan, ikuti konvensi yang ada, sekalipun bukan pilihan favoritmu. Konsistensi adalah properti kolektif, bukan preferensi pribadi.

Ringkasan #

Nama class dan custom property adalah antarmuka utama untuk membaca CSS. BEM membagi komponen menjadi block, element, dan modifier; SMACSS memilah peran aturan; utility-first memecah tampilan menjadi class kecil — dan semuanya hanya bekerja bila dipakai konsisten. Dengan nama yang tertata, langkah berikutnya adalah menata letak aturan-aturan itu sendiri: urutan berkas dan urutan bagian di dalam stylesheet, topik chapter berikutnya.