BEM

Versiunea actuală a paginii nu a fost încă examinată de colaboratori experimentați și poate diferi semnificativ de versiunea revizuită la 11 octombrie 2015; verificările necesită 23 de modificări .

BEM (Block-Element-Modifier) ​​este o metodologie de dezvoltare web , precum și un set de biblioteci de interfețe, cadre și instrumente auxiliare.

Prezentare generală

Concepte de bază

„Bloc”, „element” și „modificator” sunt termenii de bază BEM. Acestea sunt concepte necesare și suficiente pentru a descrie o interfață de orice complexitate.

Blocare

Un bloc este o componentă independentă a interfeței. Un bloc poate fi simplu sau compus (conține alte blocuri). Când creați un bloc, trebuie să vă asigurați că acesta poate fi folosit oriunde pe pagina web, precum și repetat în același loc pe pagină (elementul părinte). Blocul trebuie să includă toată implementarea necesară pentru a reprezenta partea interfeței pe care o exprimă.

Element

Un element este o componentă a unui bloc. Elementele sunt sensibile la context: au sens doar în blocul lor. Un element este o componentă opțională a unui bloc; blocurile mici se descurcă fără elemente.

Modificator

Un modificator este o proprietate a unui bloc sau element care specifică modificări ale aspectului sau comportamentului acestuia. Modificatorul poate fi un boolean (de ex button_big. ) sau o pereche cheie-valoare (de ex . menu_type_bullet, menu_type_numbers). Un bloc sau un element poate avea mai mulți modificatori în același timp.

Scopul creării BEM

BEM oferă un model semantic comun pentru toate tehnologiile utilizate în dezvoltarea front-end (HTML, CSS, JavaScript, șabloane etc.)

Folosind conceptele de „bloc”, „element” și „modificator” este posibil să se descrie structura arborescentă a documentului. O astfel de descriere se numește arbore BEM și este o reprezentare semantică a interfeței, o abstractizare peste arborele DOM.

Aplicarea BEM în diverse tehnologii web

HTML/CSS

În HTML / CSS , blocurile, elementele și modificatorii sunt reprezentați ca clase CSS denumite conform convenției de denumire. Mai multe blocuri pot fi localizate pe același nod DOM, caz în care nodului DOM îi sunt alocate 2 clase CSS. Un bloc și un element al altui bloc pot fi, de asemenea, localizate pe același nod DOM.

Reguli de denumire pentru clasele BEM de la Yandex

Clasa CSS a blocului se potrivește cu numele blocului. O cratima este folosită pentru a separa cuvintele în nume de bloc complexe.

<div class= "header" > ... </div> <ul class= "meniu" > ... </ul> <span class= "button" > ... </span> <div class= "tabbed-pane" > ... </div>

Clasa CSS a unui element conține numele blocului și numele elementului, separate prin două caractere de subliniere.

<div class= "header" > <div class= "header__bottom" > ... </div> </div> <ul class= "meniu" > <li class= "menu__item" > ... </li> </ul> <span class= "button" > <input class= "button_control" > ... </input> </span> <div class= "panoul cu tabele" > <div class= "panoul-filă__panoul" > ... </div> </div>

Clasa CSS modificatoare conține numele blocului și numele modificatorului separate printr-o singură liniuță de subliniere. În cazul în care modificatorul este o pereche cheie-valoare, acestea sunt, de asemenea, separate printr-un caracter de subliniere. Pentru un modificator de element, atât numele blocului, cât și numele elementului sunt stocate în clasa CSS. Clasa CSS modificatoare este folosită împreună cu clasa sa de bloc (sau element).

<div class= "header header_christmas" > ... </div> <!-- Ediția de Crăciun a antetului --> <ul class= "meniu" > <li class= "menu__item menu__item_current" > ... </li> </ul> <span class= "button button_theme_night" > ... </span> <div class= "panoul cu file" > ... </div> Convențiile de denumire a clasei BEM de Harry Roberts

Convenții alternative de denumire au fost propuse de Harry Roberts [1] . El sfătuiește să folosiți 2 cratime pentru a separa numele blocurilor și ale elementelor de modificator.

<div class= "header header--christmas" > ... </div> <!-- Ediția de Crăciun a antetului --> <ul class= "meniu" > <li class= "menu__item menu__item--current" > ... </li> </ul> <span class= "buton buton--theme_night" > ... </span> <div class= "panou cu file - panou cu file --dezactivat" > ... </div> Prefixe

Unele convenții de denumire recomandă utilizarea prefixelor . Deci, toate clasele de bloc pot începe cu prefixul b-.

<div class= "b-header" > ... </div> <ul class= "b-menu" > ... </ul> <span class= "b-button" > ... </span> <div class= "b-tabbed-pane" > ... </div>

Uneori, numele abreviat al proiectului este folosit ca prefix. De exemplu, OrangePool->op.

<div class= "op-header" > ... </div> <ul class= "op-meniu" > ... </ul> <span class= "op-button" > ... </span> <div class= "op-tabbed-pane" > ... </div>

JavaScript

În BEM , JavaScript funcționează cu structura abstractă a elementelor bloc și modificatorilor fără a accesa direct nodurile DOM subiacente și clasele lor CSS. De asemenea, nu sunt folosite clase CSS suplimentare „specifice JavaScript” pentru a identifica nodurile DOM. Pentru a oferi această posibilitate, se folosește un cadru sau propriul set de ajutoare.

Ajutoare pentru lucrul cu structura BEM

Deci, dacă fiecare bloc cu funcționalitate JavaScript corespunde unui obiect, metodele sale permit:

  • accesați elemente imbricate:
// presupunem că blockObj indică un obiect bloc <div class="tabbed-pane"> blockObj . elem ( 'panou' ); // returnează elemente <div class="tabbed-pane__panel">
  • lucrați cu modificatori
// presupunem că blockObj indică un obiect bloc <div class="tabbed-pane"> blockObj . setMod ( 'dezactivat' ); // setează modificatorul <div class="tabbed-pane tabbed-pane_disabled"> blockObj . delMod ( 'dezactivat' ); // elimina modificatorul Reacția la instalarea/înlăturarea modificatorilor

Deoarece modificatorul reflectă starea blocului, atunci când modificatorul este atribuit, blocul sau elementul trebuie adus în starea corespunzătoare. Pentru a schimba aspectul, este suficient să atribuiți o clasă CSS modificatoare. În cazuri mai complexe, aducerea blocului în starea dorită necesită funcționalitate JavaScript. Prin urmare, cadrul JavaScript utilizat trebuie să poată declara o listă de acțiuni corespunzătoare modificatorului.

BlockObj . on ({ activ : function () { // face ceva cand este activ }, disabled : function () { // face ceva cand este dezactivat } }); i-bem.js

Până în prezent, cadrul i-bem.js(parte a bibliotecii bem-core) oferă cea mai completă implementare a principiilor BEM în JavaScript. Informații despre cadru și exemple de utilizare pot fi găsite pe paginile:

Șabloane

Structura fișierului de proiect

Pe sistemul de fișiere, blocurile, elementele și modificatorii sunt reprezentați ca fișiere ale implementărilor lor în diferite tehnologii web. Fișierele aparținând unui singur bloc sunt combinate într-un singur director.

Structură plată

Cea mai simplă structură de proiect nu implică imbricarea în directorul bloc:

buton/ butonul.css button.js butonul.tpl button_control.css antet/ antet.css antet.tpl header_christmas.css panou cu file/ panou cu file.css tabbed-pane.js tabbed-pane.tpl Structură imbricată

În proiecte sau biblioteci mari, este convenabil să folosiți o structură de fișiere bloc imbricate, în care directoarele sunt alocate pentru elemente și modificatori.

buton/ __Control/ button_control.css butonul.css button.js butonul.tpl antet/ _Crăciun/ header_christmas.css antet.css antet.tpl panou cu file/ panou cu file.css tabbed-pane.js tabbed-pane.tpl

Aplicație

Metodologia a fost dezvoltată de Yandex și este utilizată pe scară largă în produsele acestei companii [2] .

A găsit aplicație ca parte a unui cadru HTML5 special dezvoltat pentru reproiectarea și refactorizarea serviciului de e-mail mail.ru [3] [4] .

Aceeași metodologie, printre altele, a fost folosită de compania de televiziune și radio BBC la dezvoltarea noului său site web [5] .

BEM este folosit și în versiunea Google din 2015 a Material Design Lite , un cadru HTML5 precum Twitter Bootstrap care acceptă Material design [6] .

Note

  1. ↑ Harry Roberts. MindBEMding – întocmește-ți sintaxa BEM . csswizardry (25 ianuarie 2013). Preluat la 7 iulie 2015. Arhivat din original la 8 iulie 2015.
  2. ↑ Varvara Stepanova. Ce puteți împrumuta de la Yandex frontend dev . Riga WebConf, bem.info (noiembrie 2012). Preluat la 7 iulie 2015. Arhivat din original la 8 iulie 2015.
  3. ↑ Iuri Vetrov. Studiu de caz pentru unificarea designului de produs: cadru web mobil . Revista Smasing (4 februarie 2015). Preluat la 7 iulie 2015. Arhivat din original la 8 iulie 2015.
  4. ↑ Yuri Vetrov. Unificarea designului: cadrul de grup Mail.Ru pentru web-ul mobil . bem.info (20 mai 2015). Preluat la 7 iulie 2015. Arhivat din original la 8 iulie 2015.
  5. ↑ Andrew Hillel. Senior Web Developer, Conținut. Cum am construit noua pagină de pornire a BBC . Blog BBC (16 februarie 2015). Data accesului: 7 iulie 2015. Arhivat din original pe 3 iulie 2015.
  6. ↑ Înțelegerea B.E.M. material-design-lite. Preluat la 7 iulie 2015. Arhivat din original la 11 ianuarie 2019.

Literatură

Link -uri