Au fost la începutul anului BEM. Acum promovat de Harry Roberts și folosit de mulți dezvoltatori non-Yandex. Folosite pentru a crea spațiul lor de nume și partiționarea logică a blocurilor.
BEMIT: Namespace
Utilizarea avansată a prefixelor și sufixelor de la Harry Roberts. O încercare de a descrie relația dintre blocurile independente din punctul de vedere al SMACSS și OOCSS.
Harry Roberts Style
Mulți oameni ca format străin de modificatori, prin "-", este mai ușor de citit.
Style camelCase
Și prin CamelCase - și mai ușor de citit!
Stil fără subliniere
Unii merg mai departe și înlocuiesc "__" cu "-". camelCase garantează doar că veți înțelege unde este blocul și unde este elementul.
Modificatori scurți
Modificatori scurți
Corect scrieți astfel:
.block-name__elem _key_value
Sau așa:
.blockName__elem - key_value
Fără siguranță, modificatorul poate fi transferat fără bloc:
Modificatori scurți
- Pierdeți amestecurile de blocuri cu modificatori!
- Nu putem folosi Full BEM Stack!
Soluția poate fi de a scrie modificatori într-o coloană
Și totuși este posibil Jade, iar în Yandex în general nu scrie html-code de mâini, la ei BEMJSON.
Acesta este un amestec între blocul css și blocul js pe un nod dom. BEM canonice consideră că acestea nu sunt necesare, pentru că Funcția js nu are sens să se separe de bloc. Harry Roberts și dezvoltatorii non-Yandex îi folosesc în mod activ și îi promovează. separarea facilitează copierea unui css bloc fără JS asociat.
Implementări alternative: OPOR
Un exemplu bine cunoscut de utilizare a metodologiei BEM de către un dezvoltator extern - Artem Sapegin
Implementări alternative: BEViS
Dialect BEM, cu reguli mai stricte pentru fiabilitatea maximă a aspectului, inventat de Vadim Makishvili pentru Yandex.Map.
Implementări alternative:
Google MDL
Biblioteca blochează de la Google, css-implementarea materialului lor de design inventat pentru Android.
Complet BEM Stack în HTML
Puteți crea propriile dvs. ghiduri
BEM oferă doar un set de reguli de bază, implementarea specifică și sintaxa pe care o alegeți.
Toate acestea sunt BEM
Subtilitatea lui BEM
BEM include multe tehnici
Ceva despre care am discutat / menționat:
- de ce nu puteți investi blocuri
- bem-tools și instrumente alternative pentru scrierea simplificată a denumirii BEM în HTML:
- BEML - preprocesor html pentru BEM
- posthtml-bem este același, dar prin PostHTML
- bemto - mixine pentru scrierea BEM în Jade
- miksovaniya
- De ce avem nevoie de spații de nume / prefixe (inclusiv blocuri js)
Dar multe rămân în spatele scenei
- Nu v-am spus cum să împărțiți blocurile în fișiere și să le adăugați în sistemul de fișiere
- de ce nu utilizați nu utilizați @extend sass
- despre i-bem.js
- și despre blocurile abstracte (i-)
- ... blocuri de context (m-)
- ... blocuri de reținere (h-)
- ... suprascrie nivelurile
- ... modificatori globali
- ... și istoria BEM - de ce este așa?
Citiți mai multe
Articole similare
-
Siesta în Spania sau cum să vă petreceți timpul liber în mod corespunzător
-
Decuparea pereului în schema de toamnă, cum se formează corect coroana
Trimiteți-le prietenilor: