Cum să Refactor CSS - Un ghid

Refacerea CSS trebuie să fie o parte esențială a fluxului de lucru pentru dezvoltarea frontului, dacă vrem să avem o bază de cod gestionabilă și optimizată. Când refacționăm CSS, noi curățați și reorganizați codul nostru existent fără a adăuga noi caracteristici sau remedierea erorilor.

Refactorizarea ajută preveni explozia CSS, îmbunătățește lizibilitatea codului și reutilizabilitatea, și face CSS mai ușor și mai rapid pentru a executa.

Refactorizarea este de obicei necesară după un timp, deoarece chiar și proiectele care au început cu o bază de cod concisă și organizată, mai devreme sau mai târziu, încep să-și piardă claritatea; coerența, regulile caduce și părțile codului duplicat; și începem să ignorăm stilurile și să angajăm tot mai multe hack-uri și soluții.

Cea mai bună modalitate de menținere a bazei codului CSS este menținerea respectării “refactor devreme, refactor de multe ori” regulă. În acest post vom examina câteva sfaturi despre modul în care putem efectua un proces eficient de refactorizare a CSS.

1. Desfășurați un audit inițial

Pentru a avea o imagine mai bună despre ceea ce avem nevoie pentru a refactor, este cel mai bine să începeți cu un audit cuprinzător pentru a vedea ce avem în prezent.

Există multe instrumente online minunate care ne pot ajuta în acest demers. CSSDig este o extensie Chrome puternică care analizează CSS-ul unui site web și explorează punctele sale slabe, cum ar fi selectori prea specifici sau proprietăți repetitive.

CSS neutilizate investighează regulile CSS neutilizate, în timp ce instrumentele de lustruire, cum ar fi CSS Lint, fac posibilă găsirea rapidă a compatibilității, a mentenabilității și a altor probleme.

De asemenea, este important să examinați manual codul în timpul auditului inițial, deoarece multe probleme la nivelul arhitectural pot fi prinse doar în acest fel.

2. Stabiliți un plan gestionabil

Codul de lucru al codului de lucru este întotdeauna o sarcină descurajantă, dar putem ușura durerea dacă vom crea un plan despre ceea ce trebuie să facem, vom aluneca procesul de refactorizare la bucăți ușor de gestionat și vom face un program fezabil.

În refacțiunea CSS există un lucru crucial pe care trebuie întotdeauna să-l luăm în considerare: unele lucruri pe care le refăcuim, de ex. schimbând numele selectorului, o va face necesar pentru a ajusta codul fișierelor relevante HTML și JavaScript de asemenea.

Prin urmare, este o idee bună urmăriți aceste modificări suplimentare pe care trebuie să le efectuăm, și construiți-le în programul nostru de refactorizare împreună cu sarcinile primare, legate de CSS.

3. Urmăriți progresul

Înainte de a începe refactorizarea, este un pas esențial să ne întoarcem fișierele inițiale. Introducerea unui sistem de control al versiunilor, cum ar fi Git sau Subversion, în fluxul nostru de lucru poate îmbunătăți semnificativ procesul de refactorizare, deoarece vom avea un registru despre pașii secvențiali pe care i-am făcut și noi va fi capabil să se întoarcă la o etapă anterioară dacă vrem să refacem lucrurile.

4. Respectați ghidul de stil de codificare

Un ghid coerent de stil de codare poate imbunatati in mod remarcabil lizibilitatea si manevrabilitatea codului, asa ca inainte de a incepe sa refactor este esential sa configurați un ghid de stil de codare CSS.

Lucrurile importante pe care trebuie să le decideți sunt:

convențiile de denumire
reguli de formatare
declarație de comandă
unități și valori pe care dorim să le folosim
comentând reguli

Dacă nu vrem să creăm propriul ghid de stil de codificare, putem folosi și pe altcineva, cum ar fi ThinkUp, pe care îl găsim pe Github.

Nu este suficient să introducem doar un ghid de stil de codificare, de asemenea, avem nevoie rămânem la el când rescriim codul în timpul refactorizării și așteptați la fel de la toți ceilalți care lucrează la proiectul nostru.

5. Configurați o structură coerentă a fișierelor

După ce suntem pregătiți cu pregătirile, primul lucru pe care trebuie să-l facem este să creăm o structură corectă a fișierelor CSS care să acorde atenție caracterului cascadă al CSS.

Depinde în principal de proiectul cât de bine se poate organiza fișierele noastre, dar există niște reguli universale, cum ar fi utilizarea unui program separat normalize.css fișier pentru stiluri de resetare CSS, separat global.css pentru stilurile globale care sunt folosite pe întregul proiect și pentru a stoca bibliotecile terților într-un folder separat.

Dacă vrem să jucăm în siguranță cu structura noastră de fișiere CSS, există și arhitecturi gata făcute, cum ar fi SMACSS sau ITCSS, care oferă tehnici eficiente despre cum să organizați fișiere CSS într-un mod scalabil.

6. Scapa de regulile neutilizate și duplicate

După un timp, fișierele CSS încep de obicei să abundă în regulile neutilizate pe care trebuie să le identificăm și să le curățăm în timpul refactorizării. Există multe instrumente online care ne permit să investigheze aceste reguli învechite, și uneori, de asemenea, ne permite să le ștergem repede.

Cel mai cunoscut instrument pentru acest scop este probabil UnCSS, un modul Node.js care permite eliminarea rapidă a regulilor CSS neutilizate și oferă, de asemenea, opțiuni sofisticate de configurare care facilitează ajustarea procesului de curățare.

Este important să luăm în considerare faptul că noi nu doriți să eliminați neapărat regulile neutilizate toate fișierele CSS pe care le avem, de exemplu, din fișiere de stil globale, resetate sau din terțe părți, așa că trebuie să facem acest lucru excludeți-le în timp ce efectuați curățarea.

Împreună cu regulile învechite, regulile duplicate conduc, de asemenea, la bloat de cod inutil și la pierderi de performanță. Le putem elimina folosind modulul CSS Purge Node.js, dar putem lucra și cu acesta Linkuri CSS pentru a căuta reguli duplicate în fișierele noastre CSS.

7. Reduceți specificitatea

Specificitatea unui selector CSS se calculează pornind de la numărul și tipurile selectorilor interiori pe care îi conține. Specificitatea CSS este exprimată ca un număr de 4 cifre, care este cel mai ușor de înțeles dacă verificăm acest calculator vizual specific CSS:

Cea mai mică specificitate (0001) aparține selectorilor care vizează numai un element HTML general, cum ar fi

. Cu cât există mai mulți selectori interiori pe care le conține un selector compus, cu atât specificitatea este mai mare.

Anumiți selectori, cum ar fi id sau selectorii proveniți din stiluri inline, au priorități mai mari, deoarece suprascriu stilurile care aparțin unor selectori generici mai generali. De exemplu, specificitatea # ID1 selectorul este 0100.

În refactorizare, obiectivul este acela de a micșora specificitatea selectorilor (păstrați-i scurta) cât mai mult posibil, ca selectorii cu specificitate mai mare reduc în mod semnificativ reutilizabilitatea selectorului, și conduce la o bază de cod umflată.

Cele trei tipuri principale de selectori de înaltă specificitate sunt:

Selectori calificați, precum p.class1 (definirea p eticheta nu este necesară aici, deoarece face imposibilă utilizarea aceleiași clase cu alte elemente HTML)
Selectori adânc imbriciți, precum .class1 .class2 .class3 .class4 ...
ID-uri, precum # ID1

Instrumentele online, cum ar fi CSSDig menționate în Pasul 1, pot fi folosite pentru a găsi rapid acești selectori de specificitate ridicat. De asemenea, poate fi util să setați o regulă în ghidul stilului de codare despre lucruri precum nivelul maxim de cuibărit sau o limită de utilizare id selectoare.

8. Eliminați-vă `!important` reguli

Regulile CSS urmate de !important declarația suprascrie regulile de stil obișnuite. Utilizarea !important mai devreme sau mai târziu duce la cod incoerent. Nu este o coincidență majoritatea instrumentelor de lustruit le marchează drept eroare.

Când trebuie să scriem rapid CSS, s-ar putea să începem să ne bazăm pe ele, deși din simplitatea lor.

Principala problemă cu !important declarațiile sunt că, dacă vrem să le depășim în viitor, trebuie să punem și mai mult !important declarațiile în uz, deci este mai bine să le eliminați ori de câte ori este posibil în timpul procesului de refactorizare.

9. Curățați numerele magice și valorile codificate tare

În timpul fluxului de lucru CSS de zi cu zi, uneori ne confruntăm cu probleme pe care nu le putem rezolva și vom începe să folosim așa-numitele numere magice, valori care funcționează din anumite motive, dar nu înțelegem de ce. De exemplu, luați următorul exemplu:

 .class1 position: absolute; top: 28px; stânga: 15,5%;

Principala problemă cu numerele magice este că acestea sunt ocazional, și ei întruchipează “programarea prin permutare” antipattern. În timpul procesului de refactorizare trebuie să eliminăm aceste reguli arbitrare din codul nostru și să le înlocuim cu soluții mai rezonabile ori de câte ori este posibil.

Se aplică aceeași regulă codurile greu codate de asemenea. Probabil cea mai frecventă apariție a valorilor codate greu poate fi găsită în regulile înălțimii liniei:

 / * rău, va trebui să adăugăm reguli suplimentare pentru înălțimea liniei fixe la elementele copilului din .class1 * / .class1 font-size: 20px; linia-înălțime: 24px;  / * bun, regula flexibilă a înălțimii liniei poate fi utilizată în siguranță și de elementele copilului * / .class1 font-size: 20px; Înălțimea liniei: 1,2;

Valorile codificate greu fac ca codul nostru să fie mai puțin rezistent la viitor și mai rigid, astfel încât, ca parte a refactorizării, să avem nevoie să-i descompunem și înlocuiți-le cu valori flexibile.

10. Unități și valori refactori

Pentru a facilita întreținerea și depanarea în viitor și pentru a evita defecțiunile care pot rezulta din utilizarea unor unități diferite, cum ar fi em și px, simultan, avem nevoie să rămânem la reguli coerente despre modul în care folosim valorile relative și absolute.

Dacă le-am folosit în mod incoerent în trecut, trebuie să le transformăm astfel încât să poată constitui un sistem concis

Dacă folosim prea multe culori similare pe site-ul nostru, poate fi și un lucru înțelept raționalizează schema de culori prin reducerea numărului de culori pe care le folosim. (Iată un post despre cum să alegeți într-o manieră practică o schemă de culori a site-ului.)