CSS Academy · Pelajaran

BEM: Penamaan Blok Elemen Pengubah

Gunakan metodologi Block-Element-Modifier untuk mencipta nama class yang boleh dijangka dan digunakan semula.

Pelajaran 2 daripada 413 langkah

BEM: Penamaan Blok Elemen Pengubah ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah BEM?

BEM (Blok–Elemen–Pengubah) ialah konvensyen penamaan yang menghasilkan nama kelas yang menerangkan dirinya sendiri. BEM menjadikan komponen CSS mudah diramal dan didokumentasikan sendiri.

Blok

Blok ialah komponen antara muka pengguna yang bermakna dan berdikari, serta boleh wujud secara bebas. Blok ialah kelas akar 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 ialah anak kepada blok yang tidak mempunyai 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 ialah variasi atau keadaan bagi blok atau elemen. Pengubah menggunakan tanda sempang 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 kad 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 sepadan untuk kad 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>

Faedah Kekhususan BEM

Kelas BEM semuanya ialah kelas tunggal (kekhususan 0,1,0). Tiada pemilih yang lebih khusus daripada pemilih lain, jadi penggantian adalah mudah — tambahkan sahaja kelas pengubah yang betul.

Kesilapan BEM yang Lazim

Elakkan perangkap BEM ini:

Elemen berbilang aras: .card__body__title — ratakan kepada .card__title
Elemen di luar bloknya dalam HTML
Menggunakan pemilih elemen seperti .nav__link a — menambahkan kekhususan yang tidak diperlukan

BEM dengan Sifat Tersuai CSS

BEM dan pemboleh ubah CSS sememangnya sesuai digabungkan. Takrifkan token pada peringkat blok yang boleh digantikan oleh pengubah:

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

Bila BEM Tidak Patut Digunakan

BEM terlalu berjela dan tidak sesuai untuk kelas utiliti atau gaya sekali guna. Rangka kerja utamakan utiliti seperti Tailwind menggantikan BEM sepenuhnya. Gunakan BEM untuk pustaka komponen tersuai apabila penamaan semantik penting.

BEM dalam Amalan

Banyak sistem reka bentuk menggunakan varian BEM atau skema penamaan yang serupa. Sintaks khusus kurang penting berbanding prinsip yang konsisten: blok → elemen → pengubah, tanpa sarang yang mendalam dan dengan kekhususan yang rata.

Semakan Pantas

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

Jawab dalam pelajaran interaktif

Rumusan

BEM menggunakan penamaan Blok, Elemen dan Pengubah: .block__element--modifier. Semua kelas ialah kelas tunggal untuk kekhususan yang rata dan sama. Elemen (__) berada di dalam bloknya. Pengubah (--) menghasilkan varian. Elakkan sarang yang mendalam seperti .card__body__title — ratakan kepada .card__title.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “BEM: Penamaan Blok Elemen Pengubah” percuma?

Ya — teks penuh “BEM: Penamaan Blok Elemen Pengubah” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “BEM: Penamaan Blok Elemen Pengubah”?

Gunakan metodologi Block-Element-Modifier untuk mencipta nama class yang boleh dijangka dan digunakan semula. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “BEM: Penamaan Blok Elemen Pengubah” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy