Înțelegerea metodologiilor de scriere a CSS

În acest post vom vedea ce metodologii de scriere CSS sunt, unele metodologii bine cunoscute și modul în care acestea pot fi utile pentru optimizarea codului nostru CSS. Să începem cu cea mai simplă întrebare pentru a face mingea să se rostogolească. Ce este o metodologie?

O metodologie este un sistem de metode. Gândiți-vă la o metodă ca pe o simplă modalitate de a face ceva într-o manieră sistematică, într-un anumit mod prestabilit de a face lucrurile pentru a obține rezultatul dorit.

Pentru a obține rezultate mai bune, ne îmbunătățim metodele prin planificarea mai bună a acestora, schimbarea ordinii, simplificarea etapelor - indiferent ce funcționează mai repede și este mai mult eficient.

Metodologia CSS

Acum, să vorbim despre metodologia CSS. La fel ca și cu doar despre tot în viață, ne-am o metodă de scriere CSS prea: unele resetare a scrie CSS în primul rând, unele stiluri de aspect loc ultimul, unele începe cu două până la trei clase pentru coafare un element, unele scrie toate codurile CSS un singur fișier.

Metodele noastre preferate au fost fie stabilite pe cont propriu de-a lungul timpului sau influențate de alții sau cerute la locul de muncă sau datorită tuturor celor de mai sus. Dar, în timp, veteranii CSS au formulat metodologii pentru a scrie CSS care sunt mai multe flexibil, definit, reutilizabil, ușor de înțeles și flexibil.

Vom analiza metodologiile formulate, care vor include:

1. OOCSS (Object Oriented CSS)
2. BEM (bloc, element, modificator)
3. ACSS (Atomic CSS)
4. SMACSS (arhitectură scalabilă și modulară pentru CSS)

Notă: Niciunul dintre conceptele menționate mai jos nu ar trebui să fie confundat cu orice cadru, bibliotecă sau instrument care poate avea același nume și același concept ca și aceste metodologii. Acest post este doar despre metodologiile de scriere a CSS.

1. OOCSS

Dezvoltat de Nicole Sullivan în 2008, conceptele-cheie ale OOCSS (Object Oriented CSS) includ CSS obiect identificarea, separarea structurii și a stilurilor vizuale și evitarea stilurilor bazate pe locație.

În OOCSS, primul pas pe care Nicole îl propune este să îl facem identificați obiectele din CSS.

“Practic, un "obiect" CSS este un model vizual repetat, care poate fi extras într-un fragment independent de HTML, CSS și, eventual, JavaScript. Acest obiect poate fi reutilizat pe tot parcursul unui site. - Nicole Sullivan, Github (OOCSS)“

Luați, de exemplu, această structură de pe acest site. Iată ceva care este un model vizual repetat și are propriile sale HTML și / sau CSS independente:

Avem aici două tipuri de obiecte, o previzualizare mai mare a titlurilor pe care le vom numi post-preview-primar și o bara laterală cu titluri pe care le vom numi post-preview-secundar.

Avem nevoie să structura separată și pielea (adică stiluri care creează aspectul obiectelor). Cele două tipuri de obiecte au structuri diferite, una este într-o cutie mai mare, chiar dacă acestea arată asemănătoare, cu imagini la stânga și titluri la dreapta.

Să dăm imaginile ambelor obiecte o clasă post-preview-imagine și adăugați codul care pune imaginea în stânga. Acest lucru ne împiedică să repetăm ​​codul unde să punem imaginea în interiorul obiectelor în CSS. Dacă există și alte obiecte similare, reutilizăm post-preview-imagine pentru ei.

De asemenea, separarea pielii poate fi făcută și pentru stiluri mai simple frontiere sau fundaluri. Dacă aveți mai multe obiecte cu aceeași margine albastră, crearea unei clase separate pentru marginea albastră și adăugând-o la obiectele reduceți de câte ori trebuie să fie codate frontierele albastre în CSS.

Nicole sugerează de asemenea nu adăugați stiluri în funcție de locație, de exemplu, în loc de a direcționa toate linkurile din interiorul unei div pentru a evidenția, dați aceste linkuri a marcă de evidență cu stilurile CSS corespunzătoare. În acest fel, când trebuie să evidențiați o legătură într-o altă parte a paginii, puteți reutiliza clasa de evidențiere.

Pro-urile OOCSS: Coduri de styling vizuale reutilizabile, coduri flexibile de locație, reduceri ale selectorilor adânc înfundați.

Contra de OOCSS: Fără o cantitate echitabilă de modele vizuale repetate, structura de separare și codurile de stil vizual par a fi inutile.

2. BEM

Dezvoltat de dezvoltatorii de la Yandex în 2009, conceptele-cheie pentru BEM (Block, Element, Modifier) ​​includ identificarea bloc, element & modificator și denumirea acestora în consecință.

A “bloc” este, în esență, aceeași ca o “obiect”(din exemplul anterior), an “element” se referă la componentele blocului (imagine, titlu, text de previzualizare în cele de mai sus preview-post- obiecte). A “modificator” poate fi utilizată atunci când se schimbă starea unui bloc sau a unui element, de exemplu atunci când adăugați o clasă activă la un element din meniu pentru ao evidenția, clasa activă acționează ca modificator.

Odată ce ați identificat componentele, denumiți-le în consecință. De exemplu:

• un bloc de meniu va avea clasa meniul
• elementele sale vor avea clasa articol din meniu (blocul și elementul sunt separate prin dublu semn)
• Modificatorul pentru starea dezactivată a meniului poate avea clasa menu_disabled (modificator delimitat de un singur subliniere)
• modificator pentru starea dezactivată a unui element de meniu poate fi menu__item_disabled.

Pentru modificatori, putem folosi de asemenea valoare cheie format pentru denumire. De exemplu, pentru a distinge toate elementele de meniu care leagă articolele învechite, le putem da clasa menu__item_status_obsolete, și pentru a modela orice elemente de meniu care indică documente în așteptare, numele clasei poate fi menu__item_status_pending.

Denumirea poate fi modificată la ceea ce funcționează pentru dvs. Ideea este de a putea identificați, blochează, elemente și modificatori din numele claselor. Consultați unele dintre sistemele de denumire listate în site-ul BEM.

Site-ul BEM este de asemenea listat modul în care blocarea, elementul și segregarea modificatorilor pot fi de asemenea aduse în sistemul de fișiere CSS. Blocurile de genul “butoane” și “intrări” pot avea dosarele proprii constând în fișierele (.css, .js) care sunt asociate cu aceste blocuri, ceea ce face lucrurile mai ușoare când vrem să le importăm în alte proiecte.

Pro BEM:Numele de clasă ușor de utilizat și reducerea selectorilor CSS profunzi.

Contra ale BEM:Pentru a păstra numele înfățișate în mod natural, BEM vă recomandă să păstrați blocul pentru elementul de cuibărit.

3. ACSS

A făcut faimos de Yahoo, undeva lângă sfârșitul primului deceniu al anului 21^Sf secolul, conceptele cheie ale ACSS constau în crearea de clase pentru cel mai atomic nivel al stilului, adică o pereche de proprietăți-valoare, apoi folosirea acestora în HTML după cum este necesar.

Este greu de determinat când a fost dezvoltat pentru prima oară ACSS (Atomic CSS) de când conceptul a fost folosit de ceva vreme. Dezvoltatorii au folosit clase cum ar fi .clearfix overflow: hidden pentru mult timp. Ideea în ACSS este de a au o clasă pentru aproape fiecare reutilizabilă pereche de proprietăți-valoare care nu are legătură cu conținutul vom avea nevoie de site-ul nostru și de a adăuga aceste clase când este necesar elementelor HTML.

Mai jos este un exemplu de clase bazate pe ACSS și modul în care sunt folosite în HTML.

 .mr-8 marginea-dreapta: 8px; .fl-r float: right; 
 

După cum puteți vedea, numărul de clase va crește cu această metodă, iar HTML-ul va fi aglomerat de toate aceste clase. Această metodă nu este 100% eficientă, dar poate fi folosită dacă doriți. Yahoo folosește acest lucru la urma urmei.

Pro-urile ACSS:Styling HTML fără a lăsa HTML.

Contra ACSS:Prea multe clase, nu prea îngrijite și s-ar putea să-l urăști.

4. SMACSS

Dezvoltat în 2011 de către Jonathan Snook SMACSS (Scalable and Modular Architecture for CSS) funcționează prin identificarea celor 5 tipuri diferite de reguli de stil. Numele de clase și sistemul de înregistrare sunt create pe baza acestora.

“SMACSS este o modalitate de a vă examina procesul de proiectare și de a integra aceste cadre rigide într-un proces de gândire flexibil. - Jonathan Snook”

SMACSS identifică 5 tipuri de reguli de stil și anume baza, layout, modul, stare, și temă.

• Stilurile de bază sunt stilurile implicite direcționate către etichetele HTML de bază, cum ar fi

  , .

• Stilurile de stiluri sunt stiluri utilizate pentru a defini aspectul paginii, cum ar fi codarea în cazul în care meniurile antetului, subsolului și lateral vor merge.
• Modelele sunt specifice unui modul cum ar fi galeria sau prezentarea de diapozitive.
• Stilurile de stat sunt pentru evidențierea elementelor cu state schimbabile, cum ar fi ascunse sau dezactivate.
• Tema este utilizată pentru modificarea schemei vizuale a paginii.

Diferitele reguli de stil pot fi identificate utilizând un prefix în numele clasei, de exemplu, l-antet (pentru aspect) sau t-header (pentru temă). De asemenea, putem organiza aceste tipuri diferite de reguli prin plasarea lor în fișiere și foldere separate.

Pro-urile SMACSS:Cod mai bine organizat.

Contra de SMACSS: Nu pot să mă gândesc.

Există o carte online gratuită pe care o puteți citi despre SMACSS, sau puteți cumpăra versiunea pentru versiunea ebook pentru ao studia mai mult.

Concluzie

Metodologiile CSS de mai sus vă vor oferi un sistem gestionați și optimizați codurile CSS. Acestea pot fi combinate, cum ar fi OOCSS-SMACSS, sau OOCSS-BEM, sau BEM-SAMCSS pentru a se potrivi nevoilor dvs..

Există, de asemenea, cadre și biblioteci dacă doriți un sistem automat de executare a metodologiilor CSS, cum ar fi:

• Cadrul OOCSS
• Instrumente BEM
• Cadru organic CSS (urmează conceptul atomic).