CSS Academy · Pelajaran

BEM: Penamaan Block Element Modifier

Terapkan metodologi Block-Element-Modifier untuk membuat nama class yang konsisten dan dapat digunakan ulang.

BEM: Penamaan Block Element Modifier adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu BEM?

BEM (Blok–Elemen–Pengubah) adalah konvensi penamaan yang membuat nama kelas dapat menjelaskan dirinya sendiri. Konvensi ini membuat komponen CSS mudah diprediksi dan terdokumentasi dengan sendirinya.

Blok

Blok adalah komponen antarmuka pengguna yang bermakna dan berdiri sendiri, sehingga dapat ada secara independen. Blok merupakan kelas akar dari komponen tersebut.

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

Elemen

Elemen adalah turunan dari suatu blok yang tidak memiliki makna di luar blok tersebut. Elemen menggunakan garis bawah ganda: .block__element.

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

Pengubah

Pengubah adalah variasi atau keadaan dari suatu blok atau elemen. Pengubah menggunakan tanda hubung ganda: .block--modifier.

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

Contoh BEM Lengkap

Komponen kartu dengan penamaan BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

Struktur CSS BEM

CSS yang sesuai untuk kartu BEM:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

Manfaat Spesifisitas BEM

Kelas BEM semuanya merupakan kelas tunggal (spesifisitas 0,1,0). Tidak ada selektor yang lebih spesifik daripada selektor lain, sehingga penimpaan menjadi mudah — cukup tambahkan kelas pengubah yang tepat.

Kesalahan Umum dalam BEM

Hindari masalah BEM berikut:

Elemen bertingkat: .card__body__title — sederhanakan menjadi .card__title
Elemen yang berada di luar bloknya dalam HTML
Menggunakan selektor elemen seperti .nav__link a — menambahkan spesifisitas yang tidak diperlukan

BEM dengan Properti Kustom CSS

BEM dan variabel CSS berpadu secara alami. Tentukan token tingkat blok yang dapat ditimpa oleh pengubah:

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

Kapan Tidak Menggunakan BEM

BEM bersifat panjang dan tidak ideal untuk kelas utilitas atau gaya sekali pakai. Kerangka kerja berbasis utilitas seperti Tailwind menggantikan BEM sepenuhnya. Gunakan BEM untuk pustaka komponen kustom yang mengutamakan penamaan semantis.

BEM dalam Praktik

Banyak sistem desain menggunakan variasi BEM atau skema penamaan yang serupa. Sintaks khususnya tidak sepenting prinsip yang konsisten: blok → elemen → pengubah, tanpa penyarangan mendalam, dan spesifisitas yang datar.

Pemeriksaan Singkat

Dalam BEM, sintaks mana yang mewakili elemen bernama "title" di dalam blok "card"?

Ringkasan

BEM menggunakan penamaan Blok, Elemen, dan Pengubah: .block__element--modifier. Semua kelas merupakan kelas tunggal sehingga memiliki spesifisitas yang datar dan setara. Elemen (__) berada di dalam bloknya. Pengubah (--) membuat variasi. Hindari penyarangan mendalam seperti .card__body__title — sederhanakan menjadi .card__title.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “BEM: Penamaan Block Element Modifier” gratis?

Ya — teks lengkap “BEM: Penamaan Block Element Modifier” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “BEM: Penamaan Block Element Modifier”?

Terapkan metodologi Block-Element-Modifier untuk membuat nama class yang konsisten dan dapat digunakan ulang. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “BEM: Penamaan Block Element Modifier” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy