Menulis CSS Rapi dengan Metodologi BEM (Block, Element, Modifier)

Masalah Penamaan Class yang Membingungkan

Saat membuat website sederhana, memberi nama *class* CSS seperti .tombol, .kotak, atau .teks-merah terasa sangat mudah. Namun, saat halaman website-mu mencapai puluhan, kamu akan mulai kehabisan ide nama. Parahnya lagi, class .tombol di halaman Beranda tidak sengaja menimpa (merusak) desain .tombol di halaman Profil.

Untuk mengatasi kekacauan ini, raksasa teknologi Yandex menciptakan standar penamaan yang disebut BEM (Block, Element, Modifier).

1. Block (Blok Utama / Komponen Induk)

Block adalah komponen utuh yang bisa berdiri sendiri. Bayangkan ini sebagai wadah utama. Nama *Block* harus singkat dan mendeskripsikan bendanya (bukan rupanya).

• Contoh BEM: .card, .navbar, .user-profile.
• Buruk: .kotak-biru (Jangan menamai berdasarkan visual, karena jika besok warnanya diganti merah, nama class-nya jadi tidak relevan).

2. Element (Bagian dari Blok)

Element adalah bagian kecil di dalam Block yang tidak bisa berdiri sendiri di luar blok tersebut. Penulisannya disambung dengan Dua Garis Bawah (Underscore) __.

• Jika Blok-nya adalah .card, maka gambar di dalamnya dinamai .card__image, dan judulnya dinamai .card__title.
• Dengan melihat nama .card__title, developer lain langsung tahu: "Oh, class ini khusus untuk judul di dalam komponen Card." Ini mencegah konflik dengan judul di komponen lain!

3. Modifier (Variasi / Varian)

Modifier digunakan ketika sebuah Block atau Element memiliki versi tampilan yang sedikit berbeda (misal: tombol versi besar, atau kartu versi mode gelap). Penulisannya disambung dengan Dua Strip (Hyphen) --.

• Contoh: Kamu punya tombol standar .btn. Untuk tombol versi bahaya (warna merah), kamu membuat class tambahan: .btn--danger.
• Untuk menggunakannya di HTML, kamu memanggil keduanya: Hapus.

Keuntungan Nyata Menggunakan BEM

BEM mungkin terlihat aneh dan panjang di awal (seperti .navbar__menu-item--active). TAPI, BEM memberikan jaminan 100% bahwa kode CSS-mu tidak akan pernah bocor dan merusak komponen lain. BEM membuat kodemu sangat modular (bisa dibongkar pasang) dan sangat mudah dipahami saat kamu harus bekerja dalam tim yang berisi puluhan Frontend Developer.