Retipărit aici un articol care a căzut în uitare.
Mulți dezvoltatori, chiar dacă nu au în spatele lor un proiect comercial executat cu succes, nu lasă să caute cel mai bun mod de a organiza stiluri în aspect. Și majoritatea s-au stabilit pe sinteza OOCSS. SMACSS. BEM și SASS. În acest articol, nu vom vorbi numai despre ceea ce este CSS propriu-zis. Uniunea OOCSS. SMACSS. BEM și SASS. dar, de asemenea, ia în considerare cea mai eficientă structură de organizare a fișierelor în aspect.
Mai întâi, să ne reamintim ce înseamnă fiecare dintre cele trei metodologii ale CSS orientate pe obiecte.
OOCSS + SCSS
Principiul OOCSS constă în existența separată a obiectului și a modificărilor acestuia. Acest lucru este necesar pentru a putea plasa clona obiectului în orice loc al site-ului, fără a întrerupe stilurile existente.
Clona obiectului prin noua clasă este extinsă cu stiluri suplimentare (design). Astfel, într-un document html, mai multe clase sunt atribuite unui bloc simultan. Clasa Threading este tipică pentru multe cadre, de exemplu Bootstrap.
Cu toate acestea, multitudinea de clase este contrară principiilor SMACSS. care recomandă evitarea repetării. Acesta este unul dintre principiile principale de scriere a "codului curat".
SASS vine la salvare. și anume directiva
@ include și @extend. Cu ajutorul lor la orice bloc, puteți atașa stiluri suplimentare ocolind html.
Folosind un șir
Extindem clasele albastru și roșu cu stiluri din butonul: clasă.
Când compilam SCSS, obținem următoarea intrare în CSS:
Acest lucru coincide complet cu principiile OOCSS. care este puternic recomandat de creatorul său, Jonathan Snook. DAR! Stilurile pentru clasele de butoane sunt, de asemenea, scrise în CSS. Și în acest caz complet în zadar, nu avem nevoie de ele. Deci, foarte des se întâmplă în aspect, atunci când designul de bază nu este aplicat.
În acest caz, este mai bine să utilizați directiva Selector de substituenți (%). Placeholderul este scris numai în CSS! când se numește:
Cu toate acestea, în acest caz, în CSS compilate, aceleași stiluri vor fi repetate în fiecare clasă.
Același lucru se va întâmpla dacă utilizați directiva @mixin. Cu toate acestea, atunci când folosim mixin, obținem un anumit avantaj.
Variabile definite în mixin. pot fi modificate o singură dată și se vor schimba simultan în întregul aspect. Acest lucru economisește mult timp și efort. În plus, folosind mixin, puteți modifica valorile variabilelor din bloc, dacă acest lucru este cerut de proiect (a se vedea demo-ul).
SASS vă permite să evitați clasele inutile în aspectul datorat cuiburilor. Cu toate acestea, uneori cuiburile joacă o glumă crudă asupra noastră și o mostenire mare se aplică blocului, cum ar fi
Iar aici este timpul să ne îndreptăm atenția asupra metodologiei BEM. dezvoltat de compania Yandex. Definește principiul creării numelor de clasă pentru elementele de niveluri diferite și a statelor lor.
În articol nu vom lua în considerare originalul BEM, ci versiunea lui Nicolas Gallagher. pe care toată lumea preferă să o folosească, pentru că este mult mai transparentă.
Pe scurt, ceea ce este este CSS corectă pe BEM.
.bloc de stil pentru blocul părinte
.block__element este stilul pentru blocul de copii imbricate.
.blockmodifier - stil de stat blocat.
Diferite versiuni sunt posibile.
Un bloc de copii poate avea un stil de stare:
Un stil de stare poate avea un bloc copil:
Potrivit dezvoltatorilor care au testat-o, metodologia BEM este oarecum urâtă în scris și confuză în domeniul de aplicare.
De exemplu, creatorul csswizardry.com Harry Roberts dă un exemplu:
Sublinierea indică faptul că h1 aparține elementului copil. Cu toate acestea, Harry subliniază că nu este sigur dacă clasa pentru h1 ar trebui întotdeauna să fie scrisă în acest fel.
Dar, totuși, el repetă de mai multe ori pe paginile articolului său ideea: indiferent cât de frumos arata tehnologia, principalul lucru este că funcționează!
Fie ca atare, BEM rezolva perfect problema mostenirii in SASS. Și cel puțin aceasta poate fi utilă pentru a scrie CSS-ul potrivit.
În SASS scriem:
În CSS compilat, primiți:
Sass 3.3+ BEM permite următoarea combinație:
În CSS compilat, primiți:
Moșteniți sfârșitul, este generată o singură clasă!
Organizarea structurii fișierelor
Și acum să vorbim despre organizarea structurii de fișiere a layout-ului pe SASS. Studiind experiența principalilor dezvoltatori străini și a structurilor lor, precum și prin utilizarea cunoștințelor lor modeste, am făcut următoarea concluzie cu privire la structura optimă a aspectului:
Cel mai adesea acest lucru este stil.css, dar aici în mine spune obiceiul de a face layouts pe html5 boilerplate. Fișierul principal de aspect, unde sunt importate toate celelalte părți ale acestuia (vedeți mai jos)
Include normalize.css și stiluri pentru elementele de bază ale site-ului: html, body, a, ul, li și așa mai departe.
Dacă utilizați propria rețea sau redefiniți cadre pregătite. În consecință, folderele _mixins sunt importate aici. _variables.scss, etc.
Stiluri pentru obiecte.
Mă apropii mai mult de SMACSS, unde se propune să sortați totul în foldere. Prefer să salvez fiecare modul într-un fișier separat și apoi să îl import în _modules.scss. Deci, este mai convenabil să editați. Luați în considerare, de asemenea, creatorii SCSS Bootstrap.
Tot ce nu este inclus în dosarele de mai sus.
Trimiteți-le prietenilor: