Senibina CSS: Pengubah Elemen Blok (BEM) & CSS Atom

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

bem (pengubahsuaian blok-elemen) adalah metodologi CSS yang menggalakkan pemaju untuk memikirkan laman web sebagai koleksi blok komponen yang boleh diguna semula. Ia menyediakan sistem penamaan yang jelas yang menjadikannya lebih mudah untuk memahami hubungan antara bahagian -bahagian laman web yang berlainan, terutama untuk pasukan pembangunan yang besar.
Sebaliknya, CSS atom memberi tumpuan kepada mewujudkan gaya yang sangat halus, boleh diguna semula, dan bukannya membuat set peraturan untuk setiap komponen. Ia mengurangkan konflik tertentu dan membolehkan pembangunan komponen HTML yang pesat. Walau bagaimanapun, ia lebih sesuai untuk pasukan kecil atau pemaju individu.
BEM dan CSS atom boleh digunakan bersama untuk menggabungkan struktur BEM dengan kebolehgunaan semula CSS atom. Ini boleh menghasilkan asas kod CSS yang sangat teratur dan mudah untuk mengekalkan asas CSS.
Walaupun mereka mempunyai manfaat, kedua -dua BEM dan CSS atom mungkin tidak berguna dalam situasi di mana pemaju tidak mempunyai kawalan penuh ke atas tag (seperti menggunakan CMS). Dalam kes ini, pemaju mungkin perlu menggunakan pemilih yang panjang dan khusus untuk mencapai matlamat mereka.

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:

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:

Nama blok mestilah unik dalam projek

nama elemen mestilah unik dalam blok
• 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:

<code class="language-html"><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></code>

CSS kami mungkin kelihatan seperti ini:

<code class="language-html"><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></code>

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:

<code class="language-css">.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;
}</code>

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
Kandungan BEM adalah lebih daripada satu bahagian dalam bab ini. Laman web BEM menerangkan pendekatan ini dengan lebih terperinci dan juga menyediakan alat dan tutorial untuk memulakan anda. Untuk mengetahui lebih lanjut mengenai konvensyen penamaan BEM, satu lagi sumber yang sangat baik ialah BEM.

• 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:

  <code class="language-html"><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></code>

  3
  mari kita bandingkan dengan sistem atom, di mana setiap perisytiharan menjadi kelasnya sendiri:

  <code class="language-html"><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></code>

  Ini lebih CSS. Sekarang mari kita buat semula komponen mesej ralat kami. Menggunakan CSS Atom, tag kami menjadi:

  <code class="language-css">.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;
  }</code>

  tanda kami juga lebih lama. Tetapi apa yang berlaku apabila kita membuat komponen mesej amaran?

  <code class="language-css">.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;
  }</code>

  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:

  <code class="language-html"><p class="msg msg-error">An error occurred.</p></code>

  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:

  <code class="language-css">.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;
  }</code>

  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.

  Argumen terhadap CSS Atom

  CSS atom yang bertentangan dengan hampir semua yang kita pelajari tentang menulis CSS. Rasanya hampir sama buruknya dengan ciri -ciri gaya penampan di mana -mana. Malah, salah satu kritikan utama metodologi CSS atom adalah bahawa ia mengaburkan garis antara kandungan dan persembahan. Jika anda mengapung elemen ke kiri dan tambahkan margin sepuluh piksel, apa yang perlu anda lakukan apabila kita tidak lagi mahu elemen terapung ke kiri? Sudah tentu, satu jawapan adalah untuk mengeluarkan kelas FL dari elemen kami. Tetapi sekarang kita mengubah HTML. Keseluruhan alasan untuk menggunakan CSS adalah untuk memastikan tag tidak terjejas oleh demonstrasi dan sebaliknya. . CSS. Dalam artikel asal Kobleentz, dia menggunakan nama kelas seperti.-10 (margin: 10px) dan .p-10 (padding: 10px). Masalah dengan konvensyen penamaan ini harus jelas. Menukar kepada margin lima piksel atau 20 piksel bermakna kita perlu mengemas kini CSS dan dalam tag kami . Anda masih boleh menambah .button-Close atau .Ccordion-Trigger ke kod anda. Untuk operasi JavaScript dan DOM, nama kelas tersebut sebenarnya lebih baik.

  bem dan css atom
  BEM berfungsi dengan baik apabila anda mempunyai sejumlah besar pemaju yang membina modul CSS dan HTML secara selari. Ia membantu mencegah pepijat dan pepijat yang dibuat oleh pasukan besar. Ia skala dengan baik, sebahagiannya kerana konvensyen penamaan adalah deskriptif dan boleh diramal. BEM bukan sahaja sesuai untuk pasukan besar, tetapi ia sesuai untuk pasukan besar. CSS Atom berfungsi lebih baik apabila terdapat pasukan kecil atau jurutera yang bertanggungjawab untuk membangunkan satu set peraturan CSS dan pasukan yang lebih besar membina komponen HTML yang lengkap. Dengan CSS atom, pemaju hanya boleh melihat panduan gaya - atau kod sumber CSS - untuk menentukan set nama kelas yang diperlukan oleh modul tertentu.

  belajar bila hendak pergi jalan anda sendiri

  Dalam praktiknya, CSS anda mungkin mengandungi campuran pelbagai kaedah. Sebagai tambahan kepada nama kelas utiliti yang mempengaruhi susun atur, anda juga mungkin mempunyai beberapa nama kelas yang menggambarkan kandungan atau komponen. Jika anda tidak mempunyai kawalan penuh ke atas tag (contohnya menggunakan CMS), kaedah ini tidak berguna. Anda mungkin perlu menggunakan pemilih yang panjang dan khusus untuk mencapai apa yang anda mahukan.

  Soalan Lazim Mengenai Senibina CSS: BEM dan CSS Atom

  Apakah perbezaan utama antara BEM dan CSS atom?

  bem (blok, elemen, pengubah) dan CSS atom adalah kedua -dua metodologi untuk menganjurkan dan membina kod CSS. BEM memberi tumpuan kepada konvensyen penamaan yang menjadikan CSS lebih mudah dibaca dan difahami. Ia membahagikan reka bentuk ke dalam blok, elemen, dan pengubah untuk mewujudkan hubungan yang jelas dan ketat antara CSS dan HTML. CSS Atom, sebaliknya, adalah tentang menulis kelas CSS yang kecil, satu tujuan yang mencerminkan fungsi visual. Ia menggalakkan kebolehgunaan dan bertujuan untuk mengurangkan jumlah kod.

  Bagaimanakah BEM meningkatkan skalabiliti CSS?

  BEM meningkatkan skalabilitas CSS dengan menyediakan hubungan yang jelas dan ketat antara CSS dan HTML. Ia menggunakan konvensyen penamaan khusus untuk memudahkan untuk memahami hubungan antara unsur -unsur yang berbeza. Ini menjadikan kod lebih mudah untuk mengekalkan dan skala kerana lebih mudah untuk menambah ciri -ciri baru atau mengubah suai ciri sedia ada tanpa memecahkan apa -apa.

  Bolehkah saya menggunakan BEM dan CSS atom pada masa yang sama?

  Ya, BEM dan CSS atom boleh digunakan serentak. Sesetengah pemaju telah mendapati bahawa menggabungkan kedua -dua pendekatan ini dapat mencapai yang terbaik dari kedua -dua dunia. Konvensyen penamaan yang ketat BEM boleh digunakan untuk membina CSS, manakala kelas satu tujuan CSS atom boleh digunakan untuk gaya satu elemen. Gabungan ini boleh menghasilkan asas kod CSS yang sangat teratur dan mudah untuk dijaga.

  Apakah faedah menggunakan CSS atom?

  CSS atom memberikan banyak faedah. Ia menggalakkan kebolehgunaan semula, yang boleh mengurangkan jumlah CSS yang anda perlukan untuk menulis. Ia juga meningkatkan konsistensi reka bentuk, kerana kelas yang sama digunakan untuk komponen yang berbeza. Di samping itu, CSS atom boleh menjadikan stylesheets anda lebih mudah untuk dikendalikan dan difahami, kerana setiap kelas mempunyai satu tujuan yang jelas.

  Bagaimanakah BEM mengendalikan isu kekhususan CSS?

  BEM membantu menangani isu kekhususan CSS dengan menggalakkan pemaju menggunakan pemilih kelas dan bukan pemilih ID. Ini menghasilkan konsistensi dalam kekhususan sepanjang projek, menjadikannya lebih mudah untuk menutup gaya jika perlu. Selain itu, konvensyen penamaan BEM jelas menunjukkan unsur -unsur yang berkaitan, dengan itu mengurangkan kemungkinan konflik gaya yang tidak dijangka.

  Adakah CSS atom sesuai untuk projek besar?

  Ya, CSS atom sesuai untuk projek besar. Tumpuannya terhadap kebolehgunaan semula dan kelas tujuan tunggal dapat membantu mengekalkan CSS walaupun projek terus berkembang. Walau bagaimanapun, ia memerlukan pendekatan yang ketat untuk memastikan kelas konsisten dan bermakna.

  Bagaimanakah BEM membantu dalam kerja berpasukan?

  Konvensyen penamaan yang jelas dan ketat BEM menjadikannya lebih mudah bagi ahli pasukan untuk memahami kod CSS setiap kali mereka menyertai projek. Ini meningkatkan kerjasama kerana pemaju dapat dengan mudah memahami dan mengubah suai kod yang ditulis oleh orang lain.

  Apakah kelemahan yang berpotensi menggunakan CSS atom?

  Kelemahan potensi CSS atom adalah bahawa ia boleh membawa kepada sejumlah besar kelas dalam HTML. Ini mungkin menjadikan HTML lebih sukar untuk dibaca dan difahami. Tambahan pula, CSS atom memerlukan pendekatan yang ketat untuk memastikan kelas adalah konsisten dan bermakna.

  Bagaimana untuk memulakan pelaksanaan BEM dalam projek saya?

  Untuk mula melaksanakan BEM, anda perlu membahagikan reka bentuk ke dalam blok, elemen, dan pengubah. Kemudian, gunakan konvensyen penamaan BEM untuk menamakan kelas CSS anda. Ini akan mewujudkan hubungan yang jelas antara CSS dan HTML anda, menjadikan kod anda lebih mudah dibaca dan diselenggara.

  Bolehkah saya menggunakan bem atau css atom dengan preprocessors CSS seperti sass atau kurang?

  Ya, kedua -dua BEM dan CSS atom boleh digunakan dengan preprocessors CSS seperti SASS atau kurang. Preprocessors ini boleh menjadikan menguruskan CSS lebih mudah, dan mereka sesuai dengan prinsip -prinsip organisasi BEM dan CSS atom.

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!