de Luuk Gruijs

Arhitectura triunghiului inversat: cum să gestionați proiecte CSS mari

Arhitectura triunghiului inversat cum sa gestionati proiecte CSS mari
Fotografie inițială de Brady Bellini pe Unsplash

Vi se atribuie o mică sarcină pentru a remedia câteva probleme de stilare aici și acolo. Ați găsit regulile CSS corecte pentru a aplica remedierea, așa că renunțați rapid la aceste reguli în partea de jos a fișierului CSS, împingeți modificările și apoi continuați cu lucruri mai importante.

De-a lungul timpului, acest lucru se întâmplă de câteva ori și înainte să știți că „partea de jos” a fișierului dvs. CSS constă din câteva sute de linii de cod pe care nimeni nu le înțelege și nimeni nu îndrăznește să le elimine, deoarece inevitabil va sparge lucrurile.

Recunoașteți acest scenariu pentru că ori ați făcut acest lucru singur sau ați văzut colegi făcând asta? Ei bine, citiți mai departe și promiteți-vă că nu veți mai face acest lucru niciodată, deoarece iată o modalitate mai ușoară de a vă gestiona fișierele CSS.

Vă prezentăm arhitectura Triunghi inversat

Arhitectura triunghiului inversat, cunoscută și sub numele de ITCSS, este o metodologie pentru structurarea CSS-ului dvs. în cel mai eficient mod și cel mai puțin risipitor.

ad-banner

ITCSS a fost introdus pentru prima dată de Harry Roberts și poate fi vizualizat cel mai bine printr-un triunghi cu capul în jos, stratificat. ITCSS definește regulile CSS partajate ale unui proiect într-o manieră logică și sănătoasă, oferind în același timp un nivel solid de încapsulare și decuplare a celor care împiedică regulile CSS nepartajate să interfereze unele cu altele.

ITCSS este foarte flexibil, deoarece nu vă obligă să utilizați nicio metodologie de convenție de denumire specifică, cum ar fi SMACCS, OOCSS sau BEM.

1611206825 982 Arhitectura triunghiului inversat cum sa gestionati proiecte CSS mari

Principiile

ITCSS funcționează prin structurarea întregului proiect CSS în conformitate cu aceste 3 principii:

  1. Generic spre explicit
    Începem cu cele mai generice, de nivel scăzut, stiluri captive. Acestea pot fi setări de font sau, de exemplu, variabile de culoare dacă utilizați SCSS.
  2. Specificitate mică până la mare
    Selectorii cu cea mai mică specificitate apar la începutul proiectului. Specificitatea crește constant. În acest fel evităm conflictele de specificitate și modificările de specificitate folosind !important.
  3. De amploare până la localizat
    Selectorii de la începutul proiectului nostru afectează o mulțime de elemente DOM, de exemplu stilurile de resetare a browserului dvs., în timp ce selectorii din proiectul nostru devin foarte localizați, de exemplu stiluri specifice pentru o componentă.

Straturile de triunghi

Respectarea principiilor de mai sus înseamnă că trebuie să ne împărțim CSS în straturi. Fiecare strat trebuie introdus într-o locație care respectă fiecare dintre criterii.

Se întâmplă adesea ca CSS să fie grupat după, de exemplu, stiluri tipografice, stiluri de formă și stiluri pentru o anumită componentă. Aceste grupuri nu sunt adesea importate în cea mai eficientă ordine și acest lucru creează unele probleme de moștenire sau specificitate.

În ITCSS, fiecare strat este o progresie logică față de ultimul. Crește în specificitate, restrânge în acoperire și devine mai explicit. Acest lucru înseamnă că CSS-ul nostru este mai ușor de scalat, deoarece adăugăm doar la ceea ce există deja și nu înlocuim ceea ce a fost scris anterior.

Un alt mare avantaj al urmării acestei structuri este că toată lumea știe întotdeauna unde să găsească anumite reguli CSS, așa cum sunt plasate logic. Acest lucru evită problema ca oamenii să renunțe la regulile CSS din partea de jos a fișierului.

Harry Roberts, creatorul ITCSS, a stabilit șapte straturi. El le-a ordonat după cum urmează:

  1. Setări
    Dacă utilizați un preprocesor precum SCSS, acesta este punctul dvs. de plecare. În acest strat vă definiți variabilele.
  2. Instrumente
    Acest strat poate fi folosit pentru instrumentele dvs. Gândiți-vă la combinații și funcții care trebuie să fie disponibile la nivel global. Dacă nu trebuie să fie, așezați-le în stratul de unde sunt necesare.
  3. Generic
    În acest strat, adăpostim toate stilurile la nivel înalt, de mare anvergură. Acest strat este adesea același în toate proiectele dvs., deoarece conține lucruri precum Normalize.css, resetări CSS și, de exemplu, reguli de dimensionare a casetelor.
  4. Elemente
    În acest strat punem stiluri pentru elemente HTML goale, neclasificate. S-ar putea, de exemplu, să vă gândiți la sublinieri pentru ancore pe hover sau la dimensiunea fontului pentru diferitele titluri.
  5. Obiecte
    În stratul de obiecte stilizăm primele elemente care au clase. Gândiți-vă la containerele, ambalajele sau rândurile dvs. De asemenea, vă puteți defini grila aici.
  6. Componente
    Stratul component este locul în care se întâmplă cea mai mare parte a magiei de stil, pe măsură ce veți stiliza elementele de interfață aici. În cadrele bazate pe componente, cum ar fi Angular, Vue sau React, acesta este stratul în care vă importați stilul pentru fiecare componentă, dacă nu le includeți direct în componentă.
  7. Trumps
    Stratul de atuuri este stratul murdar. Chiar și după ce vă structurați stilul în conformitate cu principiile ITCSS, se poate întâmpla să vă folosiți !important pentru a suprascrie unele stiluri terță parte, de exemplu. Faceți acest lucru în acest strat, deoarece acesta este cel mai specific, local și explicit strat.

Rezultatul final

Acum, că am explicat straturile, este timpul să analizăm cum ar putea arăta un rezultat final simplu.

// settings@import "globals";@import "branding";
// tools@import "mixins";
// generic@import "normalize";
// elements@import "fonts";@import "form";
// objects@import "grid";@import "wrappers";
// components@import "header";@import "sidebar";@import "carousel";@import "card";
// trumps@import "overrides";

Concluzie

Așa cum ITCSS nu te obligă să folosești anumite convenții de denumire, nu te obligă să folosești toate straturile. Utilizați o structură de strat care funcționează cel mai bine pentru dvs., menținând în același timp principiile ITCSS de generic la explicit, de la specificitate scăzută la înaltă și de amploare la localizate.

Dacă observați că trebuie să înlocuiți stilurile, aproape întotdeauna înseamnă că structura dvs. este ineficientă. Dacă doriți să aflați mai multe despre acest lucru, vă recomand să vizionați acest videoclip:

Căutați un loc de muncă în Amsterdam?

lucrez pentru Sytac ca dezvoltator front-end senior și căutăm dezvoltatori medior / senior specializați în Angular, React, Java sau Scala. Sytac este o companie de consultanță ambițioasă din Olanda, care lucrează pentru o mulțime de companii de renume din sectoarele bancar, aerian, guvernamental și retail.

Dacă credeți că aveți tot ce trebuie pentru a lucra cu cei mai buni, trimiteți-mi un e-mail la luuk[dot]gruijs[at]sytac[dot]io și aș fi bucuros să vă spun mai multe.