Ce este BEM (Block, Element, Modifier) ​​și cum poate fi utilizat cu Drupal Emulsify Twig

Publicat: 2022-11-08

Când lucrați cu tehnologii și software open-source, este și mai important să simplificați efortul necesar pentru a citi și înțelege codul dvs. O convenție bună de denumire vă ajută să rezolvați probleme mai mari decât să vă concentrați pe preferințele de sintaxă și stil în timpul revizuirii codului. Dezvoltatorii experimentați înțeleg importanța codului bine scris și organizat atunci când lucrează cu site-uri web mai mari, cu tone de elemente de stil.

Metodologia BEM (Block, Element, Modifier) ​​este o convenție de denumire utilizată pe scară largă pentru clasele CSS, care câștigă popularitate datorită ușurinței de utilizare pe care o oferă. Conceptul fundamental al BEM este dezvoltarea web bazată pe componente. BEM face dezvoltarea interfeței ușoară și rapidă, mai ales atunci când gestionați proiecte mari cu interfață de utilizare complexă. Să explorăm mai multe despre BEM și cum poate funcționa cu modulul Drupal Emulsify Twig.

Ce este BEM

Metodologia BEM a fost introdusă pentru a facilita accesul, înțelegerea și scalarea claselor CSS. Poate accelera procesul de dezvoltare și ajută la construirea de componente reutilizabile.

BEM include trei părți:

  1. bloc
  2. Element
  3. Modificator

bloc

Blocurile sunt componenta cea mai exterioară și independentă din punct de vedere funcțional și sunt reutilizabile. Exemple: antet, subsol, bară laterală, meniu, conținut etc.

Caracteristici:

  • Numele blocurilor ar trebui să reflecte întotdeauna scopul blocului.
  • Blocurile nu ar trebui să utilizeze marja sau poziția. Dacă trebuie să adăugați o marjă sau o poziție, atunci trebuie să o aplicați pe containerele interioare.
  • Nu utilizați etichete CSS sau selectoare de ID atunci când utilizați BEM.

Exemplu:

 <div class=”icon-button”></div>

Element

Elementele sunt elemente copil ale unui Bloc. Fiecare element poate avea un singur bloc și nu poate fi folosit în afara acestuia. Exemple: elemente de meniu, elemente de listă, câmp de introducere etc.

Caracteristici:

  • Numele elementului (clasa) ar trebui să-și descrie scopul (titlu, legenda) și nu starea sa (mic/roșu).
  • Elementul și blocul sunt separate cu o liniuță de subliniere dublă (__). Astfel: nume-bloc__nume-element.

Exemplu:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

Modificator

Un nume de clasă prin care puteți defini aspectul, starea sau comportamentul unui bloc sau element. Exemple: roșu, mare, dezactivat, fix etc.

Caracteristici:

  • Numele modificatorului descrie aspectul său. De exemplu, dacă aspectul este „_large”, atunci clasa modificatoare va fi ca icon-button__title_large .
  • Modificatorul este separat de bloc sau element printr-o singură liniuță de subliniere (_).

Exemplu:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Tipuri de modificatori

1. Boolean

Puteți verifica starea valorii booleene și o puteți seta într-o variabilă. Această variabilă poate trece ca valoare modificatoare.

2. Cheie-valoare

Structura numelui complet al modificatorului cu cheia-valoare va urma unul dintre aceste modele:

  1. block-name_modifier-name_modifier-value
  2. block-name__element-name_modifier-name_modifier-value

Convenții de denumire: reguli și scheme

Există diferite scheme de denumire. Toate schemele au câteva reguli comune, cum ar fi:

  • Numele sunt scrise cu litere latine mici.
  • Cuvintele sunt separate printr-o cratimă (-).

1. Scheme clasice de denumire

Schema clasică de denumire este schema de denumire implicită a BEM.

Block-name__elem-name_mod-name_mod-val

  • Numele elementului și numele blocului sunt separate printr-o liniuță de subliniere dublă (__).
  • Numele modificatorului și numele blocului sau elementului sunt separate printr-o singură liniuță de subliniere (_).
  • Valoarea modificatorului și numele modificatorului sunt separate printr-o singură liniuță de subliniere (_).

2. Două liniuțe Stilul de denumire

block-name__elem-name--mod-name--mod-val

  • Elementul și numele blocului sunt separate printr-o liniuță de subliniere dublă (__).
  • Blocul și elementul sunt separate printr-o cratimă dublă (--).
  • Valoarea unui modificator și a unui modificator sunt separate printr-o cratimă dublă (--).

3. Stil de denumire CamelCase

blockName-elemName_modName_modVal

  • Fiecare cuvânt după primul cuvânt începe cu o literă mare.
  • Blocurile, elementele și modificatorii sunt utilizați în același mod ca în schema standard de denumire.

4. Reacționează stilul de denumire

BlockName-ElemName_modName_modVal

  • Numele blocului și numele elementelor încep cu o literă mare.
  • Numele modificatorului începe cu o literă mică.
  • Numele unui element și numele blocului sunt separate printr-o singură cratimă (-).
  • Numele și valorile modificatorilor sunt separate în același mod ca în schema standard.

BEM în Drupal cu modulul Emulsify Twig

În Drupal, putem folosi funcția BEM Twig cu ajutorul modulului Emulsify Twig. Funcția BEM vă permite să creați clase BEM pe elemente din componente. Mai jos sunt menționate câteva extensii BEM Twig și utilizarea lor.

1. Nume simplu bloc (argument obligatoriu):

<div {{ bem('icoana') }}>

Aceasta creează:

<div class="icon">

2. Blocare cu modificatori:

Dacă doriți să adăugați mai mulți modificatori, puteți face acest lucru folosind o matrice.

<div {{ bem('pictogramă', ['mică', 'roşu']) }}>

Aceasta creează:

<div class="pictogramă pictogramă-–pictogramă mică-–roșu">

3. Element cu modificatori și nume de bloc (opțional):

<div {{ bem('pictogramă', ['mică', 'roşu'], 'pictogramă-buton') }}>

Aceasta creează:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. Element cu nume de bloc, dar fără modificatori (opțional):

<div {{ bem('pictogramă', '', 'pictogramă-buton') }}>

Aceasta creează:

<div class="icon-button__icon">

5. Element cu nume de bloc, modificatori și clase suplimentare:

<div {{ bem('pictogramă', ['mică', 'roşu'], 'pictogramă-buton', ['js-click', 'altceva']) }}>

Aceasta creează:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click something-else">

6. Element doar cu clase suplimentare (opțional):

<div {{ bem('pictogramă', '', '', ['js-click']) }}>

Aceasta creează:

<div class="icon js-click">

Adăugați atribute Twig Extension

Funcția Adăugare atribute Twig vă permite să adăugați atribute HTML elementelor componentelor dumneavoastră. Aruncă o privire la câteva funcții Adaugă atribute de mai jos:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Gânduri finale

Metodologia BEM este extrem de utilă pentru dezvoltatorii care doresc să scrie și să mențină cod de mai bună calitate, care poate fi ușor de transmis și de înțeles. Fiecare element are un scop care poate fi identificat cu ușurință după numele său și din ce bloc provine. Când este folosit corect, veți vedea că utilizarea BEM poate crește viteza de dezvoltare. Dacă ți-a plăcut ceea ce ai citit, înscrie-te pentru buletinul nostru informativ săptămânal, unde îți vom trimite informații proaspete, fierbinți, direct în căsuța ta de e-mail!