• Beranda
  • Artikel
  • SEO
  • Apa itu BEM (Block, Element, Modifier) ​​dan Bagaimana Penggunaannya dengan Drupal Emulsify Twig

Apa itu BEM (Block, Element, Modifier) ​​dan Bagaimana Penggunaannya dengan Drupal Emulsify Twig

Diterbitkan: 2022-11-08

Saat bekerja dengan teknologi dan perangkat lunak sumber terbuka, lebih penting lagi untuk menyederhanakan upaya yang diperlukan untuk membaca dan memahami kode Anda. Konvensi penamaan yang baik membantu Anda memecahkan masalah yang lebih besar daripada berfokus pada sintaks dan preferensi gaya selama tinjauan kode. Pengembang berpengalaman memahami pentingnya kode yang ditulis dengan baik dan terorganisir saat bekerja dengan situs web yang lebih besar dengan banyak elemen gaya.

Metodologi BEM (Block, Element, Modifier) ​​adalah konvensi penamaan yang banyak digunakan untuk kelas CSS yang mendapatkan popularitas karena kemudahan penggunaan yang ditawarkannya. Konsep dasar BEM adalah pengembangan web berbasis komponen. BEM membuat pengembangan antarmuka menjadi mudah dan cepat, terutama saat Anda menangani proyek besar dengan UI yang kompleks. Mari kita jelajahi lebih lanjut tentang BEM dan cara kerjanya dengan modul Drupal Emulsify Twig.

Apa itu BEM

Metodologi BEM diperkenalkan untuk membantu membuat kelas CSS lebih mudah diakses, dipahami, dan diskalakan. Ini dapat mempercepat proses pengembangan dan membantu membangun komponen yang dapat digunakan kembali.

BEM mencakup tiga bagian:

  1. Memblokir
  2. Elemen
  3. Pengubah

Memblokir

Blok adalah komponen terluar dan independen secara fungsional dan dapat digunakan kembali. Contoh: header, footer, sidebar, menu, konten, dll.

Fitur:

  • Nama blok harus selalu mencerminkan tujuan blok.
  • Blok tidak boleh menggunakan margin atau posisi. Jika Anda perlu menambahkan margin atau posisi maka Anda perlu menerapkannya pada wadah bagian dalam.
  • Jangan gunakan tag CSS atau pemilih ID saat menggunakan BEM.

Contoh:

 <div class=”icon-button”></div>

Elemen

Elemen adalah item anak dari Blok. Setiap elemen hanya dapat memiliki satu blok dan tidak dapat digunakan di luarnya. Contoh: item menu, item daftar, kolom input, dll.

Fitur:

  • Nama elemen (kelas) harus menjelaskan tujuannya (judul, keterangan) dan bukan statusnya (kecil/merah).
  • Elemen dan blok dipisahkan dengan garis bawah ganda (__). Seperti ini: block-name__element-name.

Contoh:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

Pengubah

Nama kelas tempat Anda dapat menentukan tampilan, status, atau perilaku blok atau elemen. Contoh: merah, besar, cacat, tetap, dll.

Fitur:

  • Nama pengubah menggambarkan penampilannya. Misalnya, jika tampilannya adalah “_large”, maka kelas modifiernya adalah sebagai icon-button__title_large .
  • Pengubah dipisahkan dari blok atau elemen dengan satu garis bawah (_).

Contoh:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Jenis pengubah

1. Boolean

Anda dapat memeriksa kondisi nilai boolean dan mengaturnya dalam variabel. Variabel ini dapat lulus sebagai nilai pengubah.

2. Nilai kunci

Struktur nama lengkap pengubah dengan nilai kunci akan mengikuti salah satu pola berikut:

  1. block-name_modifier-name_modifier-value
  2. block-name__element-name_modifier-name_modifier-value

Konvensi Penamaan: Aturan dan Skema

Ada skema penamaan yang berbeda. Semua skema memiliki beberapa aturan umum seperti:

  • Nama ditulis dengan huruf latin kecil.
  • Kata dipisahkan dengan tanda hubung (-).

1. Skema Penamaan Klasik

Skema penamaan klasik adalah skema penamaan default BEM.

Block-name__elem-name_mod-name_mod-val

  • Nama elemen dan nama blok dipisahkan oleh garis bawah ganda (__).
  • Nama pengubah dan nama blok atau elemen dipisahkan oleh satu garis bawah (_).
  • Nilai pengubah dan nama pengubah dipisahkan oleh satu garis bawah (_).

2. Gaya Penamaan Dua Garis

block-name__elem-name--mod-name--mod-val

  • Elemen dan nama blok dipisahkan oleh garis bawah ganda (__).
  • Blok dan elemen dipisahkan oleh tanda hubung ganda (--).
  • Nilai pengubah dan pengubah dipisahkan oleh tanda hubung ganda (--).

3. Gaya Penamaan CamelCase

blockName-elemName_modName_modVal

  • Setiap kata setelah kata pertama dimulai dengan huruf besar.
  • Blok, elemen, dan pengubah digunakan dengan cara yang sama seperti dalam skema penamaan standar.

4. Gaya Penamaan Bereaksi

BlockName-ElemName_modName_modVal

  • Nama blok dan nama elemen dimulai dengan huruf besar.
  • Nama pengubah dimulai dengan huruf kecil.
  • Nama elemen dan nama blok dipisahkan oleh tanda hubung tunggal (-).
  • Nama dan nilai pengubah dipisahkan dengan cara yang sama seperti pada skema standar.

BEM di Drupal dengan modul Emulsify Twig

Di Drupal, kita bisa menggunakan fungsi BEM Twig dengan bantuan modul Emulsify Twig. Fungsi BEM memungkinkan Anda membuat kelas BEM pada elemen dalam komponen. Disebutkan di bawah ini adalah beberapa ekstensi BEM Twig dan penggunaannya.

1. Nama blok sederhana (argumen yang diperlukan):

<div {{ bem('icon') }}>

Ini menciptakan:

<div class="icon">

2. Blokir dengan pengubah:

Jika Anda ingin menambahkan beberapa pengubah, Anda dapat melakukannya menggunakan array.

<div {{ bem('icon', ['kecil', 'merah']) }}>

Ini menciptakan:

<div class="icon icon-–ikon kecil-–red">

3. Elemen dengan pengubah dan nama blok (opsional):

<div {{ bem('icon', ['small', 'red'], 'icon-button') }}>

Ini menciptakan:

<div class="icon-button__icon icon-button__icon--ikon kecil-button__icon--red">

4. Elemen dengan nama blok, tetapi tanpa pengubah (opsional):

<div {{ bem('icon', '', 'icon-button') }}>

Ini menciptakan:

<div class="icon-button__icon">

5. Elemen dengan nama blok, pengubah, dan kelas tambahan:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

Ini menciptakan:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click something-else">

6. Elemen dengan kelas tambahan saja (opsional):

<div {{ bem('icon', '', '', ['js-klik']) }}>

Ini menciptakan:

<div class="icon js-click">

Tambahkan Atribut Twig Extension

Fungsi Tambahkan atribut Ranting memungkinkan Anda untuk menambahkan atribut HTML ke elemen komponen Anda. Perhatikan beberapa fungsi Add Attributes di bawah ini:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Pikiran Akhir

Metodologi BEM sangat berguna bagi pengembang yang ingin menulis dan memelihara kode kualitas yang lebih baik yang dapat dengan mudah diserahkan dan dipahami. Setiap elemen memiliki tujuan yang dapat dengan mudah diidentifikasi dengan namanya dan dari mana blok itu berasal. Ketika digunakan dengan benar, Anda akan melihat bahwa menggunakan BEM dapat meningkatkan kecepatan pengembangan. Jika Anda menyukai apa yang Anda baca, daftar untuk buletin mingguan kami di mana kami akan mengirimkan Anda wawasan baru yang segar langsung ke kotak masuk Anda!