La fiecare dezvoltarea de aplicații web, la care lucrează echipa sau mai mulți dezvoltatori se alternează, fie că sunt aplicații întreținute sau proiecte noi, fiecare dintre acești dezvoltatori își lasă stilul de scriere în el HTML A CSS cod. Pentru site-urile mici, întreținerea codului nu este o problemă atât de mare. Cu toate acestea, dacă ne uităm la aplicații mai mari, organizarea, unificarea stilului și optimizarea codului HTML și CSS este foarte importantă.

Există multe convenții de denumire care încearcă să stabilească reguli pentru programatori atunci când scriu cod pentru orice aplicație. Indiferent de metodologia pe care o alegeți pentru proiectul dvs., o veți utiliza pe parcursul creării și întreținerii sale. avantajele CSS și UI mai structurate. Unele convenții sunt mai flexibile, altele sunt foarte stricte, unele sunt mai ușor de înțeles și adaptabile, altele sunt complexe.

Dar care este răspunsul meu la asta, pe care să o alegi? BEM.

Modificator element bloc metodologie (prescurtată ca BEM) este foarte popular, convenție de denumire utilizată în HTML și CSS. Scopul principal al acestei convenții este crea de asemenea Clase CSS, care sunt neechivoc și pentru dezvoltatorul co cele mai informative. El poate face asta să înțelegem mai bine și mai repede relația dintre HTML și CSS într-un proiect dat (adesea la prima vedere).

Pentru a compara o clasă CSS care este scrisă în moduri diferite:

În primul caz, nu este posibil să se definească imediat unde se termină și începe următorul cuvânt. În celelalte două, cuvintele sunt separate lizibil prin cratime. Cu toate acestea, niciunul dintre ele nu ne oferă informații mai detaliate despre ceea ce reprezintă un element această definiție. În acest din urmă caz, este posibil să se utilizeze din nou o astfel de clasă din greșeală și, prin urmare, este definită ambiguu.

Dar cum arată în BEM?

bloc este cea mai mare abstractizare a unei noi componente, cum ar fi un meniu:

. Acest bloc ar trebui considerat un părinte. „Copiii” săi, sau elementele sunt plasate după numele blocului și sunt separate prin două puncte de subliniere

. Și la final modificatori, manipulați un bloc sau un element astfel încât să putem schimba o anumită clasă de temă sau stil fără a provoca modificări la un modul complet fără legătură. Este gata prin adăugarea a două cratime la numele blocului sau al elementului, asa de

Al nostru definiție înregistrarea acestui Clase CSS noi atunci prevede la prima vedere informație despre lucrul cu un element dintr-un bloc "meniul" Care e numit "Articol" și are modificatorul său "Vizibil".

Reguli de bază ale scrisului în BEM în puncte:

  • Cursurile sunt scrise cu litere mici latine. Pot conține o cratimă (separarea cuvintelor) sau un număr.
  • Numele de blocuri definesc spații de nume pentru elementele și modificatorii săi
  • Numele elementelor sunt separate de bloc două sublinieri __
  • Modificatorii sunt separați de un bloc sau element două liniuțe ––

convenția

Dacă acest cod a fost scris de un alt dezvoltator și nu cunoaștem proiectul, ar trebui să avem o idee bună despre clasele care sunt responsabile pentru ce și cum depind unele de altele. Dezvoltatorii pot atunci creați-vă propriile componente și modificați blocurile sau elementele existente după sine fără a schimba niciun alt element pe site, datorită lipsei de ambiguitate a orelor.

Un exemplu real, mai complex (deși poate nu din cauza BEM!) Jquery plugin photo