Jadikan elemen BEM sebagai komponen apabila elemen itu mempunyai tujuan yang jelas dan boleh mengurus pelaksanaannya sendiri di luar blok induk. Gunakan latihan Mac setempat di bawah untuk menguji sempadan itu sebelum menamakan semula kelas atau memindahkan CSS.

Apakah yang menjadikan elemen itu bebas?

Bagi seseorang yang menyelenggara halaman HTML yang ditulis sendiri, persoalan praktikalnya ialah sama ada bahagian yang semakin berkembang patut kekal sebagai sebahagian daripada induknya atau menjadi blok yang diselenggara secara berasingan. BEM mentakrifkan blok sebagai komponen yang bebas dari segi logik dan fungsi; elemen tergolong dalam sesuatu blok dan tidak boleh digunakan secara bebas daripadanya. Blok boleh mengandungi blok lain. Konsep utama

Pertimbangkan halaman sintetik yang mengandungi blok workbench. workbench__preview mengandungi bentuk abstrak, label dan kapsyen. Pada mulanya, ketiga-tiganya hanya digunakan untuk meja kerja. Kemudian, pratonton yang sama diperlukan di kawasan shelf yang sempit. Peletakan kedua itu memberikan tugas pengekstrakan yang konkrit: tentukan sama ada pratonton itu boleh menjadi blok shape-tile dengan rupa dan struktur dalaman tersendiri.

Kedalaman sahaja tidak menentukan perkara ini. BEM membenarkan elemen bersarang dalam DOM sambil mengekalkan nama yang rata: workbench__preview, workbench__label dan workbench__caption. Nama seperti workbench__preview__caption secara salah menunjukkan bahawa sesuatu elemen tergolong dalam elemen lain. Panduan mula pantas rasmi juga mengiktiraf blok perkhidmatan sebagai pilihan apabila elemen kompleks memerlukan bahagian dalaman yang disusun secara berasingan. Mula Pantas

Perbezaan yang berguna ialah antara memindahkan markup ke templat berasingan demi kebolehbacaan dengan menetapkan blok BEM baharu. Anda boleh membuat perubahan pertama tanpa terus membuat keputusan tentang perubahan kedua. Jadikan sempadan blok itu jelas apabila anda dapat menerangkan perkara yang diurus oleh bahagian yang diekstrak, perkara yang disediakan oleh hosnya dan cara peletakan lain akan menggunakannya.

Uji kebergantungan sebelum mengekstrak

Panduan membuat keputusan berikut ialah kaedah editorial yang diterbitkan daripada prinsip kebebasan BEM. Ini bukan sistem pemarkahan rasmi. Gunakannya pada satu subpepohon calon, bukannya menilai seluruh halaman sekali gus.

Soalan Bukti yang menyokong pengekstrakan Sebab untuk mengekalkan elemen itu
Adakah tujuannya jelas? “Memaparkan bentuk dengan label dan kapsyen” Tujuannya hanya “pembalut dalaman meja kerja”
Bolehkah elemen itu mengurus persembahan dalamannya? Sempadan, jarak dan tipografinya bergerak bersama Peraturan itu tidak boleh dipisahkan daripada struktur induknya
Bolehkah hos mengurus peletakan secara berasingan? Hos mengawal ruang yang tersedia dan jarak sekeliling Calon itu memerlukan susun atur leluhur tertentu
Adakah variasinya menerangkan dirinya sendiri? Jubin padat sesuai digunakan di beberapa peletakan Setiap variasi dinamakan mengikut induk tertentu
Adakah penyelenggaraan berasingan akan membantu sekarang? Terdapat peletakan kedua atau tanggungjawab dalaman yang besar Pengekstrakan akan menambah antara muka yang belum diperlukan

Tulis satu ayat sebelum mengubah kod: “shape-tile mengurus bentuk, label, kapsyen dan jarak dalamannya; hos mengurus peletakan dan lebar yang tersedia.” Jika ayat itu terus bertambah sehingga merangkumi susunan lajur meja kerja atau tertib elemen sejajar, pertimbangkan semula tempat sempadan itu patut diletakkan.

Asingkan susun atur luaran daripada rupa dalaman. Panduan CSS BEM menetapkan geometri dan kedudukan luaran melalui induk, serta menunjukkan cara menggabungkan kelas blok bebas dengan kelas elemen induk pada nod yang sama. Gabungan ini dipanggil mix. Metodologi CSS

Contohnya, class="shape-tile workbench__preview" boleh menyatakan kedua-dua identiti. Biarkan shape-tile menentukan sempadan dan susun atur dalamannya, dan workbench__preview menentukan peletakannya. Elakkan menetapkan sifat yang sama melalui kedua-dua identiti itu kecuali penggantian tersebut memang disengajakan sebagai sebahagian daripada kontrak.

Bina perbandingan setempat pada Mac anda

Cipta folder baharu untuk latihan ini supaya anda dapat membandingkan reka bentuk yang diekstrak tanpa mengubah halaman sedia ada. Anda memerlukan editor teks biasa dan pelayar desktop; contoh ini tidak memerlukan pemasangan pakej, JavaScript, fon yang dimuat turun atau fail imej.

Dalam TextEdit, pilih File > New, kemudian Format > Make Plain Text. Tampal HTML di bawah dan simpan sebagai index.html, dengan memilih Use .html jika diminta. Apple menerangkan langkah ini dan juga cara membuka semula HTML sebagai sumber dengan menggunakan Ignore rich text commands. Bekerja dengan dokumen HTML dalam TextEdit pada Mac

Cipta dokumen HTML lengkap

Dokumen ini meletakkan komponen yang dicadangkan dalam dua hos. Semua label adalah sintetik, dan bentuk abstrak dilukis menggunakan CSS. Simpan yang berikut sebagai index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Tambah helaian gaya lengkap

Cipta satu lagi fail teks biasa bernama styles.css dalam folder yang sama. Pastikan nama fail sebenarnya ialah styles.css, bukannya styles.css.txt. Tampal keseluruhan helaian gaya ini:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Buka index.html dalam Safari atau pelayar desktop lain. Perbandingan yang dimaksudkan ialah meja kerja yang lebih lebar dengan rak yang lebih sempit. Jubinnya berkongsi gaya komponen; ruang yang tersedia menentukan sama ada bentuk dan teks muat bersebelahan atau terbungkus ke baris seterusnya.

Kontrak sumber penting di sini: rel="stylesheet" menetapkan sumber helaian gaya luaran, dan href="styles.css" mengenal pasti fail yang diperlukan oleh dokumen ini. Menambah kelas BEM tidak mewujudkan pautan sumber itu. Simpan kedua-dua fail bersama-sama apabila memindahkan latihan ini. Piawaian HTML mentakrifkan hubungan helaian gaya ini. Piawaian HTML: Jenis pautan “stylesheet”

Bagaimanakah anda tahu pengekstrakan itu berjaya?

Gunakan perbandingan ini sebagai latihan diagnostik. Hasil yang dijangka di bawah berpandukan kod yang diberikan; semuanya ialah semakan yang perlu anda lakukan dalam pelayar, bukannya hasil ujian pelayar yang telah dilaporkan.

  1. Semak garis dasar. Kedua-dua jubin sepatutnya mempunyai latar belakang putih, bentuk biru bersudut bulat, label dan kapsyen. Jika semuanya kelihatan tidak bergaya, semak nama fail helaian gaya dan pautannya sebelum menilai sempadan komponen.
  2. Buang satu kelas peletakan. Padamkan workbench__preview daripada jubin pertama, simpan dan muat semula. Jidar atasnya sepatutnya berubah sementara rupa dalamannya kekal.
  3. Buang satu kelas hos. Buang workbench buat sementara waktu daripada bahagian yang mengandungi jubin itu. Bingkai hos dan lebar tetapnya sepatutnya hilang; jubin itu patut mengekalkan gaya komponennya.
  4. Ubah komponen yang dikongsi. Ubah jejari sempadan dalam .shape-tile. Kedua-dua kejadian sepatutnya berubah tanpa mengedit mana-mana pemilih hos.
  5. Uji kandungan dengan lebih berat. Gantikan satu kapsyen dengan ayat sintetik yang lebih panjang dan sempitkan tetingkap pelayar. Semak pembalutan teks dan sama ada semua teks masih kelihatan.

Tafsirkan kegagalan berdasarkan tanggungjawab. Sempadan yang hilang selepas kelas hos dibuang bermakna gaya komponen mungkin masih berada dalam pemilih hos. Jarak sekeliling yang tidak dijangka menunjukkan peraturan peletakan. Perbezaan teks mungkin mendedahkan gaya yang diwarisi atau pemilih global. Betulkan kebergantungan yang bertanggungjawab sebelum menambah penggantian lain.

Penamaan BEM tidak mewujudkan pengasingan gaya yang dikuatkuasakan oleh pelayar. Pewarisan CSS berterusan melalui pepohon dokumen: sifat yang diwarisi mengambil nilai daripada induk apabila kaskad tidak membekalkan nilai untuk elemen itu. Perkara ini ditakrifkan dalam spesifikasi CSS Cascading and Inheritance dan ditunjukkan oleh MDN. CSS Cascading and Inheritance Module Level 5, seksyen 7.2, Pewarisan

Contoh ini menetapkan fon dan warna teks jubin pada elemen akarnya dengan sengaja. Dalam halaman sebenar, mewarisi tipografi tapak mungkin lebih sesuai. Catatkan perkara itu sebagai kebergantungan. Kebebasan bermaksud persekitaran yang diperlukan boleh difahami dan mudah alih; ini tidak semestinya bermakna setiap komponen perlu mengulang semua nilai lalai pelayar.

Bilakah anda patut mengekalkan elemen itu?

Kekalkan calon itu sebagai elemen apabila makna dan pelaksanaannya masih khusus kepada induknya. Pembalut penjajaran yang hanya digunakan dalam meja kerja boleh mempunyai banyak elemen turunan tanpa memerlukan identiti awam yang berasingan. Ratakan nama BEMnya dan perbaik susunannya sebelum memperkenalkan blok baharu.

Sebaliknya, komponen yang hanya digunakan sekali masih wajar diekstrak jika tanggungjawab dalamannya besar dan sempadan kebergantungannya jelas. Anggap penggunaan semula sebagai bukti sokongan, bukannya bilangan wajib. Dalam latihan ini, peletakan kedua memudahkan pemeriksaan sempadan; ia tidak menetapkan peraturan sejagat bahawa komponen mesti digunakan dua kali.

Pertimbangkan semula juga pengekstrakan yang menghimpunkan variasi khusus hos. Nama seperti shape-tile--inside-workbench menunjukkan bahawa peletakan mungkin sedang menjadi sebahagian daripada antara muka komponen. Mula-mula tanyakan sama ada perbezaan itu patut berada dalam workbench__preview. Gunakan variasi komponen untuk perbezaan yang dapat anda terangkan berdasarkan komponen itu sendiri.

Adakah skop CSS moden mengubah keputusan ini?

Peraturan @scope boleh mengehadkan tempat pemilih yang terkandung di dalamnya dipadankan, yang boleh membantu mengurus pemilih dalam subpepohon dokumen. MDN kini menandainya sebagai Baseline 2026, tersedia merentas versi pelayar semasa sejak Mac 2026, sambil menyatakan bahawa peranti atau pelayar lama mungkin tidak menyokongnya. Jangan anggap semua pemasangan Mac menyokongnya. Peraturan at CSS @scope

Latihan yang diberikan menggunakan pemilih kelas biasa dan tidak memerlukan @scope. Kekalkan gaya komponen yang penting dalam peraturan tersebut apabila menyokong pelayar tanpa skop. Skop boleh memperbaik cara anda menyatakan sempadan, tetapi keputusan tentang pemilikan masih memerlukan huraian yang jelas tentang tujuan, kebergantungan dan peletakan komponen itu.

Ekstrak elemen kompleks apabila anda dapat memindahkan tujuan dan pelaksanaan dalamannya bersama-sama, mengekalkan susun atur sekeliling pada hos, dan menunjukkan hasilnya dalam konteks lain. Jika tanggungjawab itu masih bercampur aduk, kekalkan elemen itu sementara anda menjelaskannya; nama kelas yang lebih pendek sahaja tidak akan menyiapkan pemfaktoran semula.

Sumber