Salam Pada artikel ini saya akan memberi tahu Anda bagaimana Anda dapat mengubah BEM, mempertahankan fitur terbaiknya dan menyingkirkan yang terburuk.
Jadi pertama-tama, mari kita bicara tentang apa yang salah dengan BEM? Mungkin tidak ada yang perlu diubah dan semuanya begitu baik?
BEM adalah metodologi yang memungkinkan Anda untuk menggunakan CSS / HTML / JS berkali-kali. Dia memperkenalkan konsep blok, elemen, pengubah, dan campuran. Mulai menggunakannya, Anda mengerti bahwa inilah yang Anda tunggu-tunggu selama bertahun-tahun, sangat nyaman, jelas, dan indah! Tetapi setelah beberapa waktu, saat-saat seperti dalam perkembangan mulai terjadi yang dapat diselesaikan dengan BEM, tetapi ini tidak membawa kesenangan atau, yang paling penting, manfaat. Apa yang saya bicarakan? Mari kita membahas poin-poin ini:
1. Blok dan barang sekali pakai
Masalah ini sangat mengganggu saya sehingga saya terpaksa menulis artikel ini.
Konsep blok menyiratkan suatu entitas yang dapat dan harus digunakan kembali, namun, dalam praktiknya, sejumlah besar blok dibuat yang diterapkan sekali.
Sebagai contoh, kita perlu melakukan hal berikut: menempatkan judul pada halaman, diikuti oleh bidang teks dan tombol kirim, seperti yang ditunjukkan pada gambar:
Apa yang akan kita lakukan menurut BEM? Ada beberapa opsi:
- Buat blok formulir dan elemen-elemennya: judul, tombol, bidang teks
- Buat blok terpisah untuk masing-masing komponen (tombol, kotak teks, judul), serta untuk formulir
- ...
Apa pun yang kita pilih, kita akan memiliki masalah: bagaimana mengatur lekukan di antara semua blok ini?
Jika kita memilih opsi pertama, maka kita dapat memutuskan untuk memasukkan elemen-elemen dari formulir, karena ini tidak bertentangan dengan metodologi. Namun, dalam kasus ini, kami menghancurkan esensi blok: blok tidak dapat digunakan kembali, karena markup internal hanya akan sesuai dengan situasi saat ini.
Jika kami memilih opsi kedua, maka akan mungkin untuk mencampur beberapa blok ke formulir, dan elemen-elemen dari blok ini untuk mencampur dengan komponen-komponen formulir. Dan, karenanya, untuk elemen-elemen dari blok yang baru saja dibuat, atur indentasi. Dan di sini masalah blok satu kali muncul: mereka dibuat untuk digunakan hanya di satu tempat! Mereka tidak lagi dapat digunakan karena komponen akan ditempatkan secara berbeda di halaman lain.
Masalah ini menimbulkan blok / elemen satu kali, serta pengubah dari tipe
___size_ atau
___place_---- (untuk menyetel indentasi), yang, sebagaimana telah dikatakan, digunakan satu kali dan mengacaukan kedua file markup dan proyek dengan direktori mereka sendiri. dan file.
Hal yang sama tidak hanya berlaku untuk lekukan, tetapi juga untuk memblokir ukuran (untuk tombol, misalnya, ini sering mengarah pada perubahan
line-height ), ukuran font, lekukan, dll.
2. Nama kelas panjang
Bahkan tidak banyak yang bisa dibicarakan. Saya tidak berpikir ada yang suka markup yang terlihat seperti ini:
<header class="section-header section-header_margin_select-sector"> <h2 class="section-header__title font font_face_calibri-bold section-header__title_size_select-sectors"> Select a sector, please: </h2> </header>
3. Nilai default atau blokir tema
Misalkan kita memiliki blok tombol. Anda perlu menyesuaikan dgn mode sesuai dengan persyaratan desain. Tetapi dalam proyek lain juga akan ada kelas tombol. Ini akan terlihat berbeda, tetapi beberapa gaya akan sama. Apa yang direkomendasikan BEM lakukan? Dia mengatakan untuk membuat pengubah tema dan mengaturnya ke semua elemen yang diperlukan.
Tetapi dengan pendekatan ini, berikut ini akan berubah:
<input type="text" class="textbox textbox_theme_P2"> <button class="button button_theme_P2">Reset</button> <button class="button button_theme_P2">Submit</button> <button class="button button_theme_P2">Save as draft</button>
Ini adalah kekacauan kode, dan itu buruk.
Anda mengkritik - tawaran
Apa yang saya usulkan untuk memperbaiki aib ini? Saya mengusulkan manifes berikut, yang pada dasarnya merupakan tambahan untuk BEM standar.
Manifesto - Peningkatan BEM
A.1 Lapisan modul dan lapisan halaman
Saya mengusulkan untuk membagi gaya menjadi dua bagian:
Bagian pertama adalah lapisan komponen. Bagian ini ditulis sesuai dengan semua (hampir *) aturan BEM. Ini menetapkan gaya untuk blok yang dapat digunakan kembali, atau, lebih tepatnya, komponen, misalnya, untuk tombol, bidang teks, judul, dll.
Bagian lainnya adalah lapisan halaman. Diperlukan untuk mengatur gaya blok dan elemen halaman tertentu. Dengan demikian, blok / elemen ini akan digunakan sekali (dalam hal apa pun, pada satu halaman). Aturan BEM tidak berlaku di sini. Ini terlihat seperti ini:
File:
index.css .___send-button { margin-bottom: 2px; font-size: 13px; } .___message-textarea { width: 240px; height: 300px; font-size: 14px; }
Nama file tata letak halaman adalah opsional. Yang utama adalah itu cocok dengan esensi halaman. Semua gaya dimulai dengan '___' sehingga mereka tidak dapat dikacaukan dengan kelas entitas BEM standar. Juga, kelas tidak terikat pada entitas BEM - nama mereka hanya mencerminkan apa yang harus mereka terapkan. Perlu juga dicatat bahwa semua gaya tata letak halaman terletak dalam satu file, karena mereka berhubungan dengan satu halaman.
Pemisahan ini memungkinkan kita untuk menyelesaikan masalah pertama, tanpa mengurangi tujuan utama BEM - menciptakan gaya / markup sehingga dapat digunakan kembali. Gaya-gaya ini akan diterapkan hanya pada satu halaman dan tidak akan mengganggu gaya komponen dari tata letak komponen. Dengan demikian, kami menyingkirkan kelas satu kali, sambil mempertahankan kemampuan untuk menggunakan kembali blok dan tanpa melanggar ruang lingkup.
Masuk akal juga untuk memisahkan komponen dan tata letak halaman di tingkat direktori.
* kecuali untuk aturan yang dibatalkan oleh paragraf manifes berikut.A.2 Nama kelas panjang
(Eksperimental, karena itu item opsional *)
Diusulkan untuk mengganti bagian dari sistem penamaan standar dengan yang berikut:
Untuk blok:
class="" (tidak ada perubahan)
Untuk blok dengan pengubah:
class=" _" (akses melalui pemilih gabungan.
.._ )
Untuk suatu elemen:
class="__" (tidak ada perubahan)
Untuk elemen dengan pengubah:
class="__ _" (akses via
.__._ )
Item ini memungkinkan Anda untuk mendapatkan kode pendek tentang pengubah. Jelas, hal yang sama tidak dapat dilakukan dengan elemen.
Penting bahwa file dengan gaya tidak memiliki aturan yang ditetapkan untuk penyeleksi yang hanya terdiri dari pengubah:
._active { background-color: #abcdef; }
* Penamaan pengubah yang serupa dapat menyebabkan masalah pada blok / elemen yang dicampur dengan blok / elemen lain, asalkan kedua entitas dapat memiliki pengubah yang sama. Yaitu, dengan menetapkan pengubah untuk satu entitas, kami mengaturnya untuk semua orang yang dicampur ke simpul ini.A.3 Default dan tema
Semuanya sederhana di sini. Diusulkan untuk memilih tema default, tetapi untuk menentukan gaya untuk itu bukan di kelas blok yang ada di file blok, tetapi di kelas blok yang harus ditempatkan di file tema. Sebagai contoh:
File -
button/button.css .button { cursor: pointer; display: inline-block; }
File -
button/_theme/button_theme_P2.css .button_theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }
Atau sesuai dengan paragraf 2
.button._theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }
Dengan demikian, topik ini menjadi standar, tetapi Anda dapat menggunakannya secara langsung jika diinginkan.
Ringkasan
Manifesto ini dirancang untuk menyelesaikan beberapa masalah yang muncul selama tata letak sesuai dengan BEM. Komponen utamanya adalah pengelompokan menjadi tata letak komponen dan tata letak halaman. Walaupun manifesto itu terlihat sangat revolusioner, tidak lazim, dan berani, ia memecahkan masalah yang dinyatakan. Untuk menggunakan semuanya, sebagian atau tidak untuk digunakan sama sekali - tentu saja, Anda yang memutuskan.
PS Jika sekarang Anda dengan marah menggulir seluruh halaman untuk memberi minus, jangan lupa untuk menulis komentar, jika minus Anda tidak akan membawa manfaat apa pun (
serta manifes ).