O introducere rapidă la modificatorii de elemente de bloc (BEM)

Modificator element bloc

Bună! Deci doriți să obțineți o mai bună înțelegere a BEM? Cred că dacă citiți acest lucru, este posibil să nu știți ce înseamnă BEM. În caz că nu, este o prescurtare pentru elementul de bloc și modificatorul.

Ce este BEM?

BEM este o metodologie de proiectare care vă ajută să creați componente reutilizabile și partajarea codurilor în dezvoltarea front-end. - getbem.com

Acest lucru înseamnă că BEM este un sistem de metode care vă ajută să vă scrieți codul HTML și CSS, astfel încât să fie simplu de reutilizat și de partajat cu alte părți ale codului dvs.

BEM în acțiune.

Deci, acum știți definiția BEM, dar este posibil să nu știți cum arată sau cum funcționează. După cum am spus mai devreme, BEM este o prescurtare, așadar, să aruncăm o privire la fiecare dintre aceste cuvinte și la ce înseamnă ele.

bloc

Un „bloc” se referă la orice entitate care poate sta singur și care poate avea totuși sens. Exemple de blocuri sunt antetul, intrarea și caseta de selectare. Exemple de lucruri care nu sunt blocuri sunt titlurile antetului, un articol dintr-o listă sau o etichetă pentru o casetă de selectare.

Dacă ar trebui să eliminăm textul care etichetează o intrare radio și să îl punem pe cont propriu, nu va mai avea sens.

Uita-te la asta:

Dacă partea descrisă devine separată în blocuri individuale, nu ar mai avea niciun sens pentru utilizator.

Aceasta este o adevărată separare în blocuri:

Dacă am eliminat unul dintre aceste blocuri și l-am aruncat, celălalt bloc va avea totuși sens pentru utilizator. Deși, în acest caz, nu va fi util pentru utilizator, deoarece este un buton radio în loc de o casetă de selectare.

Este important să privim un bloc ca orice combinație (sau o singură etichetă HTML) a mai multor elemente (sau alte blocuri) într-un mod care să aibă sens utilizatorului atunci când este plasat singur.

element

Un element ar trebui să fie ceva mai ușor de înțeles acum, deoarece l-am explicat când am vorbit despre blocuri. Aceste părți ale unui bloc care nu au o semnificație semantică în afara blocului sunt elemente.

Să ne uităm din nou la acest lucru:

Părțile evidențiate sunt elemente, deoarece ajută la definirea care este blocul.

Codul pentru ecranul de mai sus ar arăta astfel:

Avem trei elemente care compun blocul de opțiuni: opțiunea__text, opțiunea__radio-buton, opțiunea__notare. Cu toate acestea, am putea schimba unul dintre aceste elemente într-un bloc propriu:

Elementul opțiunea__note este acum o notă de bloc. Asta înseamnă că am putea găsi o notă în afara blocului de opțiuni, într-un mod util utilizatorului.

Modificatorul

Un modificator este un steag care schimbă modul în care arată sau se comportă un bloc sau un element. De exemplu:

Cele două butoane sunt aceleași blocuri, dar arată diferit. Puterea BEM ne oferă ne permite să utilizăm același bloc de două ori și să le avem încă să arate foarte diferit.

Să vedem cum arată codul pentru asta:

În mod implicit, butonul este alb cu un text albastru. Pentru a obține o variantă, adăugăm un buton - steagul verde, care face ca butonul să fie verde cu un text alb.

Conform regulilor BEM, butonul nostru de semnalizare - verde are un „efect secundar” care ar putea duce la confuzie, care este proprietatea box-shadow. Steagul nostru face ceva despre care numele său nu ne spune. Dar este în regulă, deoarece, în micul nostru proiect, nu vom avea niciodată un buton verde cu o umbră de casetă. Dacă o facem vreodată, putem rupe pavilionul:

Acum, când avem nevoie de un buton verde cu o umbră a casetei, vom adăuga doar butonul - steagul verde. Același lucru se aplică proprietății de culoare.

Concluzie

BEM este un mod foarte frumos de a scrie și structura codul HTML și CSS. Acest ghid nu acoperă 100% din BEM, dar ar trebui să fie suficient pentru a vă oferi o înțelegere solidă a metodologiei. Puteți citi mai multe despre BEM aici.

Sper că ai învățat ceva din asta și că ai o mai bună înțelegere a BEM și cum arată în lumea reală. Dacă o faceți, nu ezitați să lăsați un comentariu și câteva clapete.

Aveți întrebări? Îmi poți trimite un DM pe twitter @THEozmic.