Cum de a optimiza CSS cu ghiduri de stil de cod

Când designerii vorbesc despre ghizi de stil, înseamnă de obicei un manual convenit pe coafură și simțire a unui site sau a unei aplicații, cu un design bine conceput schema de culori, tipografia și interfața utilizator care este folosit pe întregul proiect.

Există un alt tip de ghid de stil pe care îl putem folosi și în dezvoltarea web-ului, și este la fel de important, dar mult mai rar discutat: stil ghiduri pentru codul în sine. Ghidurile stilului de cod sunt mai degrabă pentru dezvoltatori decât pentru designeri, iar scopul lor principal este optimizarea CSS sau a altui cod.

Introducerea corectă a ghidurilor de stil pentru coduri ne oferă un a o bază mai bine organizată, consistentă, o citire mai bună a codului și un cod mai sustenabil. Nu este o coincidență faptul că importante companii de tehnologie, cum ar fi Google, AirBnB sau Dropbox, le folosesc bine.

În acest post vom analiza modul în care putem optimiza inteligent CSS-ul nostru cu ajutorul ghidurilor de stil CSS.

Ghiduri de stil de cod față de biblioteci de modele

În industria noastră există un anumit grad de incertitudine cu privire la ceea ce putem numi un ghid de stil. A List Apart de exemplu, o utilizează sinonim cu termenul bibliotecă de modele în acest articol, dar putem și să facem acest tip de definiție și în alte postări.

Pe de altă parte, există și publicații, cum ar fi CSS Tricks sau blogul lui Brad Frost, care disting ghidurile de stil de cod din bibliotecile de modele. Această din urmă abordare ne apropie probabil de un site web optimizat, deoarece ne permite să manipulăm separat codul și designul, așa că vom folosi acest lucru în acest post.

Atât ghidurile stilului de cod, cât și bibliotecile de modele includ o strategie de stil, dar un tip diferit. Bibliotecile de modele, cum ar fi Bootstrap, Fundația Zurb, Limbajul Global Experience al BBC sau biblioteca de modele MailChimp, ne furnizează un interfață utilizator cu clase premergătoare CSS, tipografie, schemă de culori, uneori un sistem de grilă și alte modele de design.

Instrucțiunile pentru stilul de cod CSS, cum ar fi Evernote sau ThinkUp (sau cele menționate în intro) conțin reguli despre cum să scrieți CSS inclusiv lucruri de genul convențiile de numire, structura fișierului, ordinea proprietăților, formatarea codului, si altii.

Rețineți că generatoarele pentru stilul de viață, cum ar fi KSS, Styledown sau Labelul de modele, generează biblioteci de modele și nu coduri de ghidare stil. În timp ce bibliotecile de modele sunt, de asemenea, extrem de utile și ridică procesul de dezvoltare web, ele nu ne permit să optimizăm codul în sine.

Construiți-vă ghidul de stil pentru codul CSS

Scopul final al unui ghid de stil CSS este de a ne asigura că putem lucra cu o bază de cod consistentă și ușor de depanat, scrisă de dezvoltatori, care respectă aceleași reguli de codare a codului. Crearea unui ghid de stil pentru coduri CSS poate dura puțin timp, dar merită efortul, deoarece trebuie doar să o facem o singură dată. Apoi putem folosi același ghid de stil pentru diferite proiecte.

Este important să rețineți că cele mai bune ghiduri de stil nu conține doar regulile de stil, ci și exemple de utilizare bună și rea, deoarece astfel dezvoltatorii pot înțelege mai intuitiv regulile.

De exemplu, AirBnB prezintă exemple bune și rele pentru dezvoltatori în următoarele moduri ușor digerabile:

Structura fișierelor

În primul rând, trebuie să găsim o logică conform căreia vom organiza fișierele noastre CSS. Pentru proiectele mai mici un fișier CSS poate fi suficient, dar pentru cele mai mari este întotdeauna mai bine să rupă codul, și concatenarea fișierelor separate mai târziu în producție.

Unii ghiduri de stil, cum ar fi ThinkUp, ne avertizează și despre asta care nu utilizează stiluri încorporate sau încorporate cu excepția cazului în care este inevitabil; este, de asemenea, o regulă utilă care merită aplicată.

Nesting

Nesting este o caracteristică excelentă în CSS, dar uneori poate ieși din control. Nimeni nu se simte deosebit de fericit, mai ales în mijlocul unui proces de depanare frustrant, lovind selectori de lungă durată, cum ar fi:

 .class_1 .class_2 # id_1 # id_2 li a span culoare: #bad;

Deci este întotdeauna bine să a stabilit o limită rezonabilă de cuibărire, de exemplu, GitHub a ales trei niveluri în ghidul de stil. Prin limitarea cuiburilor ne putem forța să scriem un cod mai bine structurat.

Reguli de numire

Utilizarea regulilor de denumire coerente pentru selectorii CSS este crucială dacă dorim să înțelegem codurile noastre luni sau chiar ani mai târziu. Există multe soluții acolo și există o singură regulă strictă pe care trebuie să o urmăm adică un nume de selector nu poate începe cu un număr.

Cele patru stiluri comune folosite în denumirea selectorului sunt .litere mici, .under_scores, .cratimă-es, și .lowerCamelCase. Este bine să alegeți oricare dintre ele, dar trebuie să urmați aceeași logică pe întregul proiect.

Utilizarea numai numele selectorului semantic este, de asemenea, esențială dacă vrem au un cod semnificativ. De exemplu, în loc de .Buton roșu (care nu arată ce face butonul) este mai bine să utilizați .Buton de alertă nume (ceea ce spune ceea ce face), în acest fel, permitem dezvoltatorilor (și viitorului nostru) să înțeleagă ceea ce face butonul respectiv.

în plus dacă vrem să-i schimbăm culoarea de la roșu la altceva în viitor, o putem face cu ușurință fără probleme. Există, de asemenea, convenții de numire CSS premade, cum ar fi convenția BEM (Block, Element, Modifier), care duc la o structură de numire consecventă cu nume unice și semnificative.

Regulile de formatare

Formatul de cod include aspecte precum utilizarea spațiului alb, a filelor, a indentării, a spațiilor, a rupturilor de linie etc. Nu există o metodă universală bună sau rău în formatare, singura regulă de bază este alegeți reguli coerente care să ducă la un cod lizibil, și să le urmeze.

Dropbox, de exemplu, cere dezvoltatorilor să introducă spații după colon în declarațiile de proprietate, în timp ce Evernote utilizează două spații pentru indentare. Putem configura cât mai multe reguli de formatare cu care ne confruntăm, dar niciodată mai mult decât este posibil să înțelegem.

Ordin de declarare

Lucrurile comandate sunt întotdeauna mai ușor de văzut, și comanda declarațiilor CSS (proprietăți cu valorile lor) în conformitate cu o regulă care are sens în rezultatul unui cod mai bine organizat.

Aruncați o privire la regulile de ordonare a proprietăților WordPress, definește următoarea linie simplă dar logică pentru a ordona în care proprietățile sunt grupate după semnificația lor:

Afişa
poziţionarea
Modelul cutiei
Culori și tipografie
Alte

Unități și valori

Deciderea asupra modului în care dorim să folosim unități și valori nu este importantă numai pentru a obține un aspect consistent al codului, dar și dacă nu facem acest lucru, putem ajunge la ceva ciudat

Imaginați-vă doar un site care se folosește alternativ px, em, și rem măsurători de lungime. Acesta nu va arăta numai rău în editorul de cod, dar cel mai probabil unele elemente vor fi surprinzător de mici sau mari pe acest site.

De asemenea, trebuie să luăm decizii cu privire la valorile culorilor (hexazecimal, rgb sau hsl) și dacă vrem să folosim proprietăți stenografice și în funcție de care reguli. Există o instrucțiune care este inclusă în fiecare ghid de stil de cod CSS la care am intrat, adică. nu specificați unitățile pentru valorile 0 (într-adevăr, pur și simplu nu).

.clasa // marja buna: 0; // margine necorespunzătoare: 0px; // marja necorespunzătoare: 0em; // Marja necorespunzătoare: 0rem;

comentând

Codul de comentare este esențial în toate limbile, dar în CSS nu numai că facilitează depanarea și documentarea, dar și secțiunile CSS în grupuri logice. Putem folosi fie / * ... * / sau // ... stil de notare pentru comentarii în CSS, important este să stați consecvent cu comentarii pe parcursul proiectului nostru.

CSS-ul Idiomatic, de exemplu, stabilește un sistem de comentare semnificativ care utilizează chiar și unele artă ASCII de bază și are ca rezultat un cod frumos organizat: