Senibina CSS: Pengubah Elemen Blok (BEM) & CSS Atom-tutorial css-php.cn

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

Artikel ini dikutip dari buku baru Tiffany "CSS Master, Edisi Kedua". Kami akan meneroka dua metodologi penamaan CSS. Kedua -dua kaedah telah dibuat untuk memperbaiki proses pembangunan untuk laman web besar dan pasukan besar; Anda boleh memilih sama ada, sama ada, atau mencampurkannya, bergantung kepada diri sendiri. Tujuan memperkenalkan mereka adalah untuk membantu anda memikirkan cara menulis CSS anda sendiri.

mata utama

Pengubahsuaian blok-elemen (BEM)

bem, atau pengubah elemen blok, adalah metodologi, sistem penamaan dan satu set alat yang berkaitan. Bem dilahirkan di Yandex dan bertujuan untuk dibangunkan dengan pesat oleh pasukan pembangunan besar. Dalam bahagian ini, kami akan memberi tumpuan kepada konsep dan sistem penamaan. Metodologi BEM menggalakkan pereka dan pemaju untuk memikirkan laman web sebagai koleksi komponen yang boleh diguna semula

blok yang boleh dicampur dan dipadankan untuk mewujudkan antara muka. Blok hanyalah sebahagian daripada dokumen, seperti tajuk, footer, atau bar sisi, seperti yang ditunjukkan dalam angka berikut. Mungkin mengelirukan, "blok" di sini merujuk kepada coretan HTML yang membentuk halaman atau aplikasi.

Blok boleh mengandungi blok lain. Sebagai contoh, blok tajuk juga boleh mengandungi logo, navigasi, dan blok borang carian seperti yang ditunjukkan di bawah. Blok footer mungkin mengandungi jubin peta tapak.

unsur -unsur lebih halus daripada blok. Seperti dokumentasi BEM menerangkan: CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

Elemen

adalah sebahagian daripada blok yang melaksanakan fungsi tertentu. Unsur -unsur bergantung pada konteks: mereka hanya masuk akal dalam konteks blok yang mereka milik.

Sebagai contoh, blok borang carian mengandungi elemen input teks dan menyerahkan elemen butang, seperti yang ditunjukkan dalam gambar di bawah. (Demi kejelasan, kita menggunakan "elemen" dalam arti unsur -unsur reka bentuk, bukan "elemen" dalam erti elemen HTML.)

Sebaliknya, blok kandungan utama mungkin mempunyai blok senarai artikel. Blok senarai pos ini mungkin mengandungi satu siri blok promosi pos. Setiap blok promosi artikel mungkin mengandungi imej, petikan, dan "baca lebih lanjut" elemen seperti yang ditunjukkan di bawah.

Blok dan unsur -unsur bersama -sama membentuk asas konvensyen penamaan BEM. Menurut peraturan BEM: CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

Nama blok mestilah unik dalam projek

Variasi -contohnya, kotak carian dengan latar belakang gelap -harus menambah pengubah dalam nama kelas
Nama blok dan nama elemen biasanya dipisahkan oleh ganda ganda (.block__element). Nama blok dan elemen biasanya dipisahkan oleh tanda hubung berganda dengan nama pengubah (contohnya,. Block-Pengubahsuaian atau .Block__element-Pengubahsuaian). Berikut adalah bem kelihatan seperti menggunakan contoh borang carian:

variasi borang ini dengan latar belakang gelap boleh menggunakan tag berikut:

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

Salin selepas log masuk

CSS kami mungkin kelihatan seperti ini:

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

Salin selepas log masuk

Dalam tag dan CSS kami, carian-Inverse dan Search__Label-Inverse adalah nama kelas yang dilampirkan pada

. Mereka bukan alternatif untuk mencari dan mencari__label. Nama kelas adalah satu -satunya jenis pemilih yang digunakan dalam sistem BEM. Subselektor dan keturunan boleh digunakan, tetapi keturunan juga harus menjadi nama kelas. Elemen dan pemilih ID dilarang. Menguatkuasakan keunikan blok dan nama elemen juga menghalang konflik penamaan, yang boleh menjadi masalah dalam pasukan. Kaedah ini mempunyai beberapa kelebihan:

.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

Salin selepas log masuk

ahli pasukan baru dapat membaca tanda dan CSS dengan mudah dan memahami tingkah laku mereka

Menambah lebih banyak pemaju dapat meningkatkan produktiviti pasukan

Penamaan yang konsisten mengurangkan kemungkinan konflik nama kelas dan kesan sampingan
CSS bebas daripada markup
CSS sangat boleh diguna semula
CSS Atom

Jika BEM adalah sayang industri, maka CSS atom adalah pemberontaknya. Thierry Kobleentz dari Yahoo menamakan dan menerangkan CSS Atom dalam artikel 2013 "Praktik Terbaik CSS yang mencabar", yang menggunakan perpustakaan kompak nama kelas. Nama kelas ini biasanya disingkat dan tidak disentuh dengan apa yang mereka mempengaruhi. Dalam sistem CSS atom, anda boleh mengetahui nama kelas apa - tetapi tidak ada hubungan antara nama kelas (sekurang -kurangnya, nama kelas yang digunakan dalam lembaran gaya) dan jenis kandungan. Mari kita gunakan contoh untuk menggambarkan. Berikut adalah satu set peraturan yang mungkin kita panggil dalam apa yang kita panggil seni bina CSS tradisional. Set peraturan ini menggunakan nama kelas yang menggambarkan kandungan aplikasi mereka -kotak mesej global, dan gaya kejayaan, amaran, dan kotak mesej ralat:
```
<div class="search">
  <label for="s" class="search__label">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit">Search</button>
</div>
```
Salin selepas log masuk
Salin selepas log masuk
3

mari kita bandingkan dengan sistem atom, di mana setiap perisytiharan menjadi kelasnya sendiri:
```
<div class="search search--inverse">
  <label for="s" class="search__label search__label--inverse">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit search__submit--inverse">Search</button>
</div>
```
Salin selepas log masuk
Salin selepas log masuk
Ini lebih CSS. Sekarang mari kita buat semula komponen mesej ralat kami. Menggunakan CSS Atom, tag kami menjadi:
```
.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}
```
Salin selepas log masuk
Salin selepas log masuk
tanda kami juga lebih lama. Tetapi apa yang berlaku apabila kita membuat komponen mesej amaran?
```
.msg {
    background-color: #a6d5fa;
    border: 2px solid #2196f3;
    border-radius: 10px;
    font-family: sans-serif;
    padding: 10px;
}
.msg-success {
    background-color: #aedbaf;
    border: 2px solid #4caf50;
}
.msg-warning {
    background-color: #ffe8a5;
    border-color:  #ffc107;
}
.msg-error {
    background-color: #faaaa4;
    border-color: #f44336;
}
```
Salin selepas log masuk
Kedua-dua nama kelas telah berubah: BG-D dan BC-D digantikan oleh BG-C dan BC-C. Kami menggunakan semula lima set peraturan. Sekarang, mari buat butang:
```
<p class="msg msg-error">An error occurred.</p>
```
Salin selepas log masuk
hei! Di sini kita menggunakan semula empat set peraturan dan elakkan menambah lebih banyak peraturan ke stylesheet kami. Dalam seni bina CSS atom yang kuat, menambah komponen HTML baru (seperti bar sisi pasca) tidak memerlukan menambah lebih banyak CSS (walaupun pada hakikatnya, ia mungkin memerlukan menambah lebih banyak). CSS atom agak seperti menggunakan kelas utiliti dalam CSS, tetapi ia mencapai hadnya. Khususnya, ia:
```
.bg-a {
    background-color: #a6d5fa;
}
.bg-b {
    background-color: #aedbaf;
}
.bg-c {
    background-color: #ffe8a5;
}
.bg-d {
    background-color: #faaaa4;
}
.bc-a{
    border-color: #2196f3;
}
.bc-b {
    border-color: #4caf50;
}
.bc-c {
    border-color:  #ffc107;
}
.bc-d {
    border-color:  #f44336;
}
.br-1x {
    border-radius: 10px;
}
.bw-2x {
    border-width: 2px;
}
.bss {
    border-style: solid;
}
.sans {
    font-style: sans-serif;
}
.p-1x {
    padding: 10px;
}
```
Salin selepas log masuk
Pastikan CSS ringkas dengan mewujudkan gaya yang sangat halus, sangat boleh diguna semula dan bukannya membuat set peraturan untuk setiap komponen
- mengurangkan konflik tertentu dengan menggunakan sistem pemilih spesifik yang rendah
- Setelah set peraturan awal ditakrifkan, perkembangan komponen HTML pesat dapat dilakukan
- Walau bagaimanapun, CSS atom bukan tanpa kontroversi.
Atas ialah kandungan terperinci Senibina CSS: Pengubah Elemen Blok (BEM) & CSS Atom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!