Memahami Metode BEM


Kenapa di beberapa file penamaan class-nya banyak menggunakan – atau __ ?

Dasarnya ada beberapa dan sedang saya coba terapkan:

Sebenarnya hanya berusaha mengubah kebiasaan lama. Sebelumnya terbiasa memakai penamaan class yang kurang semantic, misalnya;

<nav class="main-nav">
  <ul>
    <li class="item"><a href="#">Item 1</a></li>
    <li class="item"><a href="#">Item 2</a></li>
    <li class="item"><a href="#">Item 3</a></li>
  </ul>
</nav>

Perhatikan. Tidak ada yang salah memang, tapi bagian susahnya adalah keterkaitan item dengan main-nav yang kurang mudah dipahami. item yang terletak didalam <nav> atau .main-nav bisa apa saja. Logo, search form, dropdown, dan lain-lain. Kalau kita melihat CSS yang menjadi alasan markup diatas mungkin bisa dipahami, Tapi bagaimana kalau kita cuma membaca HTML-nya?

Makanya terciptalah BEM oleh Yandex. BEM (block, element, modifier) mengenalkan metode penamaan yang sedikit susah untuk diterapkan tapi lumayan mudah untuk dipahami. Berikut adalah contoh berdasarkan contoh di atas menggunakan syntax SCSS:

.main-nav {
  background-color: #333;

  &__logo {
    display: inline-block;

    &--on-right {
      float: right;
    }
  }
}

SCSS diatas jika di compile maka hasilnya seperti berikut:

.main-nav {
  background-color: #333;
}
.main-nav__logo {
  display: inline-block;
}
.main-nav__logo--on-right {
  float: right;
}

dan berikut adalah markup yang bisa kita buat:

<nav class="main-nav">
  <img class="main-nav__logo" src="...">
    ...
</nav>

atau bisa juga seperti berikut:

<nav class="main-nav">
    ...
  <img class="main-nav__logo--on-right" src="...">
</nav>

Dari kedua contoh di atas, kita bisa memahami bahwa main-nav__logo adalah elemen dari main-nav dan main-nav__logo--on-right adalah variasi dari main-nav__logo yang terletak di kanan.

Alasan kenapa menggunakan -- atau __ bisa dilihat pada contoh di atas, main-nav lebih baik daripada mainnav kan?.

Contoh dari saya masih berantakan, dan mungkin BEM memang terlihat agak aneh dan dalam penerapannya memerlukan pengetikan yang lebih banyak. Lagipula tidak semuanya harus menggunakan metode BEM. Misalnya:

.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

Beberapa contoh di atas sifatnya helper-classes dan berdiri sendiri.

Berikut sedikit kutipan dari CSSwizardry mengenai penerapan BEM:

One of the hardest parts of BEM is deciding when to start and stop scope, and when (or not) to use it. It’s a case of ‘you’ll just know when you know’.

CSSwizardry

Menurut pendapat saya pribadi, BEM lebih berguna untuk styling di elemen yang sifatnya variasi dari elemen lain. Misalnya seperti berikut:

.button { }
.button--yellow { }
.button--red { }

Kita bisa memahami bahwa .button--yellow dan .button--red adalah variasi lain dari .button tapi sifatnya tidak terlalu khusus dan tetap reusable.

Well, intinya semua kembali ke keperluan kita. Menurut saya kalau kalian menggunakan framework CSS yang kalian bangun sendiri, maka tetap jaga agar struktur CSS kalian reusable dan jaga prinsip DRY lalu nanti terapkan BEM untuk menerapkan style sesuai keperluan.

Post Lainnya

Bermain dengan function di Sass

Awalnya ingin mendalami lebih jauh mengenai fuction di Sass. Akhirnya malah mendarat di The Sass Way. Di artikel yang berjudul Using pure Sass functions to make reusable logic more useful. Lumayan menarik. Makanya aku post. Nanti kalau lupa, udah ada dokumennya jadi ga ribet carinya.

Pendapat Saya Tentang Wordpress

Setelah sebelumnya saya membahas tentang blogging secara umum dan Medium, Sekarang saya akan beralih ke pembahasan mengenai blogging engine yang self-hosted. Kali ini saya secara khusus membahas mengenai Wordpress.org, bukan Wordpress.com. Walau perbedaannya mungkin terlihat hanya sebatas itu, tapi self-hosted Wordpress jauh lebih powerfull daripada Wordpress yang tersedia sebagai service.

Cara Mudah Embed Video di Jekyll

Memasukkan sebuah video ke post memang hal yang sangat umum dilakukan. Selain memberikan konten yang lebih beragam biar tidak bosan, dengan adanya video juga bisa memperjelas maksud dari post tersebut. Hampir semua CMS memberi support untuk memasukkan video ke dalam sebuah post.

Komentar

Komentar akan tampil setelah diterima.