BEM

BEM (Block, Element, Modifier) adalah konvensi penamaan yang memformalkan kebiasaan component-based CSS menjadi aturan yang seragam dan mudah dikenali. Nama yang dihasilkan memang panjang — .kartu-produk__tombol--besar terlihat ramai dibanding .tombol — tetapi panjang itu membayar tiga persoalan klasik stylesheet besar: nama ambigu, selector bersarang yang saling berebut, dan ketidakjelasan batas antar-komponen. BEM dipakai luas di industri dan mudah diajarkan ke anggota tim baru karena hanya ada satu pola yang perlu diingat. Chapter ini membahas anatomi polanya, aturan main yang wajib, dan kapan sebuah bagian layak dipromosikan menjadi block baru.

Anatomi block__element–modifier #

Pola BEM terdiri dari tiga bagian yang digabung dengan dua pembatas:

.kartu-produk {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 16px;
}
.kartu-produk__judul {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.kartu-produk__harga {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: rgb(2, 132, 199);
}
.kartu-produk__tombol {
  padding: 10px 16px;
  border-radius: 8px;
}
.kartu-produk--unggulan {
  border-color: rgb(2, 132, 199);
  background-color: rgb(239, 246, 255);
}

Mari kita telaah polanya baris demi baris:

1. .kartu-produk: block — unit terkecil yang bermakna sendiri; class ini cukup untuk memasang kartu produk di halaman mana pun.
2. .kartu-produk__judul dan .kartu-produk__harga: element — dua tanda hubung ganda menandakan bagian dari block, bukan komponen mandiri; tanpa .kartu-produk, nama judul tidak berarti apa-apa.
3. .kartu-produk__tombol: element yang kebetulan mirip tombol umum — BEM meminta kita menyebutnya lengkap agar gayanya tidak tertukar dengan block .tombol yang sebenarnya.
4. .kartu-produk--unggulan: modifier — dua tanda hubung ganda menandai varian; markup memakainya bersama block: class="kartu-produk kartu-produk--unggulan".

Aturan Main BEM #

Dua aturan yang membuat BEM bekerja:

1. Selector selalu flat, tidak pernah bersarang. Tulis .kartu-produk__judul, jangan .kartu-produk .kartu-produk__judul. Versi bersarang mengangkat specificity menjadi 0,2,0 tanpa manfaat apa pun, dan menimbulkan pertanyaan yang tak berkesudahan: bagaimana bila judul berada di dalam .kartu-produk--unggulan .kartu-produk__tengah? Dengan selector flat, setiap aturan berada di tingkat 0,1,0 dan urutan file yang sudah kita atur pada Chapter Mengorganisasi File CSS menjadi penentu tunggal.
2. Modifier tidak memanggil element. Aturan seperti .kartu-produk--unggulan .kartu-produk__harga melanggar flatness; bila harga kartu unggulan perlu berbeda, tulis modifier pada element-nya: .kartu-produk__harga--promo. Gaya modifier block pada demo di atas cukup untuk border dan latar, tanpa menyentuh satu pun element.

Kapan Sebuah Bagian Menjadi Block Baru #

Pertanyaan yang paling sering muncul: bagian mana yang boleh menjadi element, dan bagian mana yang harus menjadi block? Ujiannya satu kalimat — dapatkah bagian ini dipakai di luar block asalnya? Badge yang hanya muncul di kartu produk boleh menjadi .kartu-produk__badge; begitu badge juga dibutuhkan di navbar dan tabel, badge menjadi block .badge yang dikomposisi ke dalam kartu. Prinsip komposisi ini kita bahas pada Chapter Component-based CSS .

Hasil di Browser:

Kartu produk tampil putih dengan sudut 12px; judul "Kopi Gayo 250g"
tebal 700 berwarna rgb(15, 23, 42) dan harga tampil biru
rgb(2, 132, 199) dengan ketebalan 700.
Kartu varian --unggulan tampil dengan border biru rgb(2, 132, 199)
dan latar rgb(239, 246, 255), tanpa mengubah gaya element di dalamnya.
Tombol element memiliki padding-top 10px.

Semua nilai di atas terverifikasi otomatis oleh penanda data-expected pada demo chapter ini. Setelah terbiasa dengan BEM, kita bisa membandingkannya dengan pendekatan yang justru meminimalkan nama komponen: utility classes pada bab berikutnya.

.kartu-produk {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 16px;
}
.kartu-produk__judul {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: rgb(15, 23, 42);
}
.kartu-produk__harga {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: rgb(2, 132, 199);
}
.kartu-produk__tombol {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  font-size: 14px;
}
.kartu-produk--unggulan {
  border-color: rgb(2, 132, 199);
  background-color: rgb(239, 246, 255);
}