BEM (Block Element Modifier)

TL;DR: BEM adalah metode penamaan kelas CSS yang membagi antarmuka menjadi Block (komponen utuh), Element (bagian dari block), dan Modifier (varian). Tujuannya menjaga style tetap modular dan menghindari konflik kelas saat tim berkembang.

Apa itu BEM?

BEM (Block Element Modifier) adalah konvensi penamaan kelas CSS yang dikembangkan tim Yandex untuk proyek besar dengan banyak kontributor. Format dasarnya: block__element--modifier. Misal card__title--featured berarti elemen title dari block card dengan modifier featured. Pendekatan ini membuat hubungan antar elemen jelas dari nama kelas saja, tanpa perlu membuka HTML.

BEM bukan teknologi, melainkan disiplin. Banyak tim memakainya bersama design system untuk memastikan setiap komponen punya identitas penamaan yang konsisten.

Anatomi

Aturannya: element selalu berada di dalam block (tidak ada element tanpa block), dan modifier menempel ke block atau element, bukan berdiri sendiri.

Kenapa Penting?

Untuk tim kecil di Indonesia yang mulai membangun produk SaaS atau dashboard internal, BEM membantu menghindari masalah klasik di CSS: kelas yang bentrok, style yang bocor antar komponen, dan kebingungan saat developer baru bergabung. Dari pengalaman membangun beberapa landing page client, project tanpa konvensi penamaan biasanya mulai pecah setelah 50 komponen. BEM dan alternatifnya seperti utility-first (Tailwind) menjawab masalah yang sama dari sudut berbeda.

Pertanyaan Umum

Apakah BEM masih relevan di era Tailwind?

Tergantung tim. Tim yang menulis CSS kustom atau pakai CSS Modules cocok dengan BEM. Tim yang pakai Tailwind CSS sering tidak perlu BEM karena penamaan sudah otomatis lewat utility. Keduanya sah, tinggal konsisten.

Apa kekurangan BEM?

Nama kelas bisa panjang dan repetitif. Untuk proyek kecil, overhead penamaan kadang tidak sebanding dengan manfaatnya. BEM paling terasa nilainya di proyek dengan tim 3 orang ke atas dan komponen lebih dari 30.