Share
V-ați întrebat vreodată cum un site mare, cum ar fi Tuts +, își păstrează CSS, HTML și JavaScript pentru a continua dezvoltarea și repetarea? Vă voi arăta procesul pe care l-am implementat pentru a păstra ordinea și întreținerea.
Primul pas în acest proces a fost găsirea unui mod de a construi o cantitate mare de CSS de care avem nevoie, care nu se va sfârși în mod inevitabil în haos.
În mod tradițional cu CSS, construiți stiluri pe măsură ce le aveți nevoie și depuneți eforturi pentru a vă face selectorii în general aplicabili, astfel încât să poată fi reutilizați pe întreg site-ul. De exemplu, iată câteva reguli simple de CSS care nu s-ar simți în afara celor mai multe stiluri:
h1 font-size: 22px; . subtitlu font-size: 18px;
Dacă trebuie să înlocuiți acești selectori într-o anumită parte a unei pagini, este posibil să utilizați reguli imbricate pentru a construi selectori care vizează elemente mai specifice:
.site-header h1 font-size: 40px; .site-header .subtitul font-size: 28px; .site-header a.navigație culoare: # 136FD2 ...
Această abordare se consideră intuitiv corectă, dar poate avea probleme semnificative odată ce ajungeți la un site care are mai mult de câteva pagini și pe care mai lucrează mai mulți dezvoltatori.
Ce se întâmplă când schimbăm stilul h1 sau .subtitlu la nivel global? marimea fontului este deja suprascris de un stil mai specific, dar dacă adăugăm a grosimea fontului sau inaltimea liniei nu va fi. Orice modificări aduse stilurilor globale se pot rezolva și pot afecta stiluri mai specifice în moduri care nu sunt previzibile fără o cunoaștere intimă a tuturor stilurilor de pe site.
Cu cât mai multe stiluri construite în acest fel, cu atât mai pronunțate vor fi "efectele secundare" ale interacțiunii cu stilurile CSS, ceea ce ar necesita încercări greșite și greșeli și, în cele din urmă, duce la o pierdere a productivității și la mai multe bug-uri.
Pentru a preveni această problemă, am adoptat o abordare a CSS bazată pe metodologia BEM. În loc să definească stiluri care se aplică la nivel global, toate stilurile sunt încorporate în "blocuri" de sine stătătoare prin intermediul unei convenții de numire. Un "bloc" este definit, mai mult sau mai puțin, ca o singură unitate independentă de conținut, care este potențial reutilizabilă (deși nu este obligatoriu ca aceasta să fie reutilizată).
De exemplu, să aruncăm o privire la blocul "secțiuni recomandate":
Conform convenției noastre de numire, acest bloc are o rădăcină div element cu numele clasei prezentate secțiuni. Acesta conține elemente cu nume de clasă, cum ar fi featured sections__title și featured sections__section-link.
Folosim o convenție de numire potrivită pentru codul sursă, ca atare toate stilurile pentru acest lucru featured secțiune bloc sunt stocate în module / featured_section.sass:
.margini secțiuni marcate: 0 0 $ lățimea gâtului 0 umplutură de vârf: 8px frontală frontală: 4px solidă # dae1e5 .featured-sections__title color: # 8fa6b3 font: bold 14px / 1.2em $ font
Această convenție de numire asigură faptul că stilurile nu mai sunt în conflict și intercalate. Atâta timp cât convenția noastră de numire este urmată, cu numele blocului la începutul fiecărui nume de clasă, este imposibil ca un stil să afecteze ceva în afara propriului bloc.
De asemenea, este extrem de ușor să se analizeze unde să se privească codul de bază pentru stilurile care corespund unui element. Puteți să vă uitați pur și simplu la numele clasei elementului și veți cunoaște numele foii de stil care se deschide.
Am ales să mergem mai departe și să aplicăm și această convenție de numire și la opiniile noastre. Fiecare bloc are o vedere parțială cu același nume, stocată sub vizualizari / module. De exemplu, vizualizarea HTML pentru site-ul nostru prezentate secțiuni blochează viețile în vizualizari / module / _featured_sections.html.slim:
În același mod în care o convenție de numire pentru fișierele noastre CSS ușurează găsirea unui stil CSS, având această convenție de numire pentru vederile noastre, este ușor să găsim codul de vizualizare. Acest lucru vine la îndemână atunci când vizionați o pagină într-un browser și observați o anumită parte care necesită modificări efectuate. Puteți să faceți doar un "Inspect Element" și să folosiți numele blocului clar vizibil în clasa CSS a unui element pentru a vă ajuta să sari direct la fișierul de vizualizare relevant.
De asemenea, am continuat și am adoptat aceleași convenții de numire pentru codul nostru JavaScript, cu un pic de ajutor de la Backbone.js.
Fiecare bloc care are nevoie de comportamentul JavaScript aplicat primește un obiect de vizualizare Backbone folosind același nume de bloc:
clasa.AccountHeader extinde evenimentele Backbone.View: 'schimbare .account-header__mobile-menu-select': 'mobileMenuChange' mobileMenuChange: -> document.location = @_selectedOption () „opțiune: selectată“
Am scris un cod de încărcare a vizualizării care se aplică la încărcarea paginii, astfel încât vizualizarea corespunzătoare din Backbone este încărcată automat pentru fiecare element cu o clasă CSS care se potrivește cu o listă de nume de blocuri cu JS asociat.
Utilizăm aceeași convenție de numire a fișierelor pentru codul nostru JavaScript, rezultând structura pentru un bloc complet prezentat în felul următor:
Aș recomanda foarte mult această abordare pentru orice proiect. Cred că este de neprețuit atunci când lucrați la un proiect mare și chiar dacă lucrați pe un site mult mai mic, nu există într-adevăr un dezavantaj pentru a structura codul dvs. front-end într-un mod modular.
Acestea fiind spuse, este posibil să întâmpinați probleme în încercarea de a utiliza această strategie dacă aveți deja o sumă semnificativă de stiluri globale CSS sau dacă vă bazați pe biblioteci CSS, cum ar fi Twitter Bootstrap. Din moment ce stilurile BEM folosesc un singur nume de clasă ca selector, ele au o valoare de "specificitate" CSS foarte scăzută și au tendința de a fi călcate de stilurile globale CSS care de multe ori au mai multe niveluri de selectori imbricați, precum și nume de tag-uri și ID-uri.
Este cu siguranta posibila trecerea de la un stil CSS global la un stil BEM mai modular si m-as gandi ca merita foarte mult pe termen lung. Cu toate acestea, vă așteptați să aveți un timp ușor mai greu pentru a construi stilurile dvs. BEM pentru un timp, și să fie pregătiți să trăiască cu adăugarea a cel puțin câteva temporare !important în CSS, până când veți reuși să vă eliminați complet stilurile globale.
Accentsconagua