CSS Architecture Block-Element-Modifier (BEM)-SITEPOINT

bem (pengubahsuaian blok-elemen) adalah metodologi pembangunan front-end, konvensyen penamaan, dan satu set alat yang berkaitan. Berasal dari Yandex, ia direka untuk pembangunan yang cekap oleh pasukan besar. Penjelasan ini memberi tumpuan kepada konsep teras dan sistem penamaan.

BEM mempromosikan laman web tontonan sebagai koleksi blok komponen yang boleh diguna semula, boleh digabungkan untuk membina antara muka. Blok adalah bahagian laman web (header, footer, sidebar, dll.), Seperti yang ditunjukkan dalam Rajah 2.3. Perhatikan bahawa "blok" di sini merujuk kepada segmen halaman HTML.

Rajah 2.3. Laman web mungkin termasuk blok header, utama, dan footer.

Blok boleh bersarang. Sebagai contoh, blok tajuk mungkin mengandungi logo, navigasi, dan blok borang carian (Rajah 2.4). Footer boleh mengandungi blok sitemap.

Rajah 2.4. Blok header merangkumi logo, navigasi, dan blok carian.

unsur -unsur lebih berbutir daripada blok. Seperti yang dinyatakan oleh dokumentasi BEM: "Satu elemen adalah sebahagian daripada blok yang melakukan fungsi tertentu. Unsur-unsur yang bergantung kepada konteks, mereka hanya masuk akal dalam blok induk mereka."

Blok borang carian, misalnya, termasuk elemen input teks dan elemen butang hantar (Rajah 2.5). Di sini, "elemen" merujuk kepada elemen reka bentuk, bukan elemen HTML.

Rajah 2.5. Blok carian dengan input teks dan hantar elemen butang.

Blok kandungan utama mungkin mengandungi blok senarai artikel, yang seterusnya mengandungi blok promo artikel. Setiap blok promo boleh mempunyai imej, petikan, dan "baca lebih lanjut" elemen (Rajah 2.6).

Rajah 2.6. Blok promosi untuk artikel laman web.

blok dan elemen membentuk teras konvensyen penamaan BEM:

• Nama blok mestilah projek yang unik.
• nama elemen mestilah unik dalam blok.
• variasi blok (mis., Kotak carian gelap) Gunakan pengubah dalam nama kelas.

Blok dan nama elemen dipisahkan oleh dua garis bawah (__). Pengubahsuaian dipisahkan dari nama blok/elemen oleh dua tanda hubung (). --

Berikut adalah borang carian BEM-gaya Contoh:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

Versi bertema gelap:

<div class="search search--inverse">
  <div class="search__wrapper search__wrapper--inverse">
    <label for="s" class="search__label search__label--inverse">Search for:</label>
    <input type="text" id="s" class="search__input search__input--inverse" />
    <input type="submit" class="search__submit search__submit--inverse" value="Search" />
  </div>
</div>

CSS yang sepadan:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

dalam markup dan CSS, search--inverse dan search__label--inverse adalah ditambah kelas, bukan pengganti. Hanya pemilih kelas yang digunakan; Pemilih kanak -kanak dan keturunan dibenarkan tetapi juga harus menargetkan kelas. Elemen dan pemilih ID dielakkan. Ini menjadikan spesifikasi pemilih rendah, menghalang kesan sampingan, dan menjadikan CSS bebas daripada corak markup. Blok unik dan nama elemen menghalang konflik penamaan. Manfaat termasuk:

Pembacaan dan pemahaman kod yang lebih baik untuk ahli pasukan baru.
Peningkatan produktiviti pasukan.
Mengurangkan perlanggaran penamaan dan kesan sampingan.
kemerdekaan CSS dari markup.
kebolehgunaan semula CSS tinggi.

Skop BEM melangkaui gambaran ini. Laman web rasmi BEM menyediakan butiran, alat, dan tutorial yang komprehensif. "Get Bem" adalah satu lagi sumber yang sangat baik untuk konvensyen penamaan.

(bahagian Soalan Lazim ditinggalkan kerana ia adalah pengulangan maklumat yang sudah ada dan akan meningkatkan panjang output tanpa menambah kandungan baru.)

Atas ialah kandungan terperinci CSS Architecture Block-Element-Modifier (BEM)-SITEPOINT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!