Share
În cazul în care nu ați observat, site-ul de analiză CSS cssstats.com a primit o revizuire recent. Este un instrument frumos proiectat care vă oferă o mulțime de viziuni obiective asupra codului dvs., dar cum puteți obține cea mai bună utilizare a statisticilor CSS? Pentru ce ar trebui să tragi? Ce înseamnă acestea și cum le puteți folosi zi de zi?
Astăzi, vom vorbi despre cele mai bune practici CSS, specificitatea și capacitatea de întreținere, plus veți învăța cum să interpretați corect și să utilizați mai bine statisticile CSS. Hai să ne aruncăm!
Faceți clic pe cssstats.com, introduceți fie adresa URL a site-ului dvs., foaia de stil, fie lipiți CSS-ul brut direct în textarea din partea de jos și apăsați Merge.
Odată analizată, vi se va da o tona de statistici despre CSS; din numărul de reguli utilizate, mărimea medie a acestora, defalcările fiecărui tip de declarație, culorile fontului și fundalului, familiile și dimensiunile fontului și graficele de specificitate.
Asta e ceea ce vă oferă CSS Statistici, acum să ne uităm la ce putem face cu toate datele.
Ca dezvoltatori de front-end, suntem constant preocupați de performanță și de experiența utilizatorului. Suntem, de asemenea, responsabili pentru construirea de software, dar cuvântul "software" este străin multor dezvoltatori din front-end, care provin dintr-un fundal de design. Este deseori ușor să ignorați cele mai bune practici atunci când codificăm CSS-ul nostru.
Cu toate acestea, adevărul este că dezvoltarea front-end, la fel ca orice altă dezvoltare software, necesită concentrarea pe cele mai bune practici. Regulile pentru cele mai bune practici sunt discutate abundent pe web, însă, din motivele acestui articol, vom aborda ceea ce ar fi cea mai importantă practică în ceea ce privește CSS: mentenabilitatea.
Mentenabilitatea centrelor CSS pe mai multe fațete diferite.
Nu vom fi scufundați în fiecare dintre aceste articole în mod individual, dar când vorbim despre mentenabilitate, fiecare dintre aceste considerații afectează întreținerea generală a codului dvs..
Răspunsul onest? Nimic, în mod necesar. Nu aflați nimic despre mentenabilitate prin simpla vizualizare a statisticilor CSS. De asemenea, trebuie să înțelegeți contextul acelui CSS special, precum și contextul dezvoltării active.
Primul mod de a analiza statisticile CSS este să căutați semne de bloat CSS.
De umple cu aer ne referim la CSS neutilizate, redundante sau inutile.
Să luăm, de exemplu, o aplicație de o pagină care conține cinci module de conținut diferite. Ce tipuri de statistici CSS ați aștepta să aibă o singură pagină? O aplicație tipică de o singură pagină poate avea o fracțiune din numărul de reguli CSS și poate jumătate din numărul de declarații de culoare ca un site de publicare de știri sau o aplicație SAAS cu mai multe fațete.
Dacă vedeți un număr enorm de selectori (de exemplu, dacă site-ul dvs. simplu de o singură pagină include cât mai mult CSS ca un cadru web ca Bootstrap, care rulează la puțin sub 2400 de selectori), este posibil să fi greșit undeva . Dacă încărcați în 30 de dimensiuni de caractere și designul dvs. solicită 10, este posibil să aveți stiluri nefolosite, umflate sau, eventual, stiluri inconsistente.
O posibilă excepție de la această regulă, deoarece se referă la mentenabilitatea, este dacă sunteți de fapt utilizând Bootstrap sau un alt cadru popular, bine documentat; deoarece documentația privind aceste proiecte este relativ adâncă și utilizarea a saturat web-ul, dezvoltatorii din front-end nu au neapărat menţine Bootstrap, atâta timp cât sursa primară păstrează implementările de bază ale Bootstrap. Cu toate acestea, dacă includeți cadrul Bootstrap pur și simplu pentru grilă sau câteva elemente de interfață, ar trebui să construiți o versiune personalizată care să nu includă CSS suplimentar pe care nu intenționați să îl utilizați.
Este posibil ca aplicația dvs. să facă ceva care necesită un număr mare de selectori, culori sau dimensiuni de fonturi. De exemplu, dacă rulați un magazin online care utilizează culorile produsului, este posibil ca un număr mare de culori să apară în CSS și să fie un caz complet legitim. Un alt exemplu este dacă rulați un site care permite utilizatorilor să selecteze dintr-o listă de dimensiuni și fonturi pentru conținutul pe care îl creează. În aceste exemple, este logic să vedeți un număr mare în acele categorii particulare.
Medium.com folosește un font de 301px undeva ... Cu toate acestea, dacă creați ceva de genul, de exemplu, un blog cu o schemă limitată de culori, statisticile CSS ar trebui să reflecte acea selecție a culorilor și numărul declarațiilor de fonturi.
Definiți aceeași dimensiune a fontului de douăzeci de ori pe CSS? Foarte des, acest lucru poate fi evitat și, de obicei, este rezultatul unei lipse de planificare. Dacă vă determinați dimensiunile de fonturi înainte de a scrie orice alt CSS, veți putea mai ușor să aplicați aceste dimensiuni în restul sistemului.
Același lucru este valabil pentru orice stil repetat; dacă găsiți că scrieți același lucru de mai multe ori, probabil că acel set de stiluri merită propria sa clasă de prezentare sau semantică sau altă definiție modulară?
Nu treceți peste bord aici; redefinirea unor dimensiuni de font sau culori de fundal nu este o afacere mare. Cu toate acestea, redefinirea mai multor stiluri de mai multe ori pe module foarte asemănătoare poate însemna extinderea unei clase de bază. De exemplu, dacă aveți o clasă de butoane:
.btn font-size: 1.2; greutatea fontului: 400; întrerupere litere: .06em; culoare: #fff; fundal-culoare: # 4a4a4a; padding: 6px 8px;
Spuneți că doriți o versiune albastră a aceluiași buton. Cum ar trebui să definiți asta? Dacă redefiniți același lucru BTN clasa, ar arata cam asa:
.btn-albastru font-size: 1.2cm; greutatea fontului: 400; întrerupere litere: .06em; culoare: #fff; fundal-culoare: # 0C508D; padding: 6px 8px;
Desigur, există multe probleme cu acest lucru. În primul rând, acesta încalcă principiul DRY (nu repetați-vă). Dar de ce contează asta?? mentenabilitate. Să spunem, de exemplu, că designul se schimbă și solicită un font mai mic pe butoane. Apoi trebuie să intrați în .BTNși .BTN-albastru pentru a schimba dimensiunea fontului. Chiar mai multe complicații apar atunci când aveți nevoie de variante ale butoanelor gri albastru și obișnuit, ca o versiune albastră. Toate modificările efectuate asupra oricărui buton trebuie efectuate în mai multe butoane.
Acest lucru este incredibil de ineficient. În schimb, ar trebui să profitați de faptul că clasele sunt modulare și vă permit să definiți stiluri de butoane care extind baza dvs. .BTN clasă.
.btn font-size: 1.2; greutatea fontului: 400; întrerupere litere: .06em; culoare: #fff; fundal-culoare: # 4a4a4a; padding: 6px 8px; .btn.btn-albastru background-color: # 0C508D;
Aha! Și acum avem o soluție mult mai sustenabilă, care elimină, de asemenea, un număr semnificativ de linii de CSS și urmează principiul DRY.
Specificitatea este unul dintre cele mai greu de înțeles colțuri întunecate ale CSS, care deseori trec și până la cei mai experimentați dezvoltatori. În statisticile CSS, puteți vedea o diagramă de specificații care arată cât de specifice sunt selectorii în CSS, precum și unde se găsesc acești selectori.
Specificitatea CSS de pe site-ul BBCAcest grafic prezintă specificitatea selectorilor așa cum se întâlnesc în CSS de la bbc.co.uk. Imaginați-vă că stânga graficului este partea de sus a foii de stil, apoi se mișcă de-a lungul axa x așa cum citește foaia de stil. Cu cât regula mai specifică, cu atât este mai mare linia albastră închisă pe y axă.
Vom oferi trei reguli generale de bază pentru a începe și apoi explicați regulile.
Vom vorbi despre fiecare dintre acestea mai profund, dar mai întâi să vorbim puțin despre modul în care funcționează specificitatea.
Selectorilor CSS li se atribuie un scor de specificitate pentru a informa motorul de redare a browserului care reguli se aplică acelor elemente. Motivul pentru care este necesar este și motivul pentru care CSS este atât de puternic: stilurile pot fi moștenite și cascadate în CSS. Aceasta înseamnă că puteți aplica mai mult de un set de stiluri unui element dat. Motorul de randare trebuie să consolideze toate aceste reguli și să prezinte ceva, dar ce se întâmplă când sunt stabilite două valori diferite pentru aceeași declarație de stil? De exemplu:
a culoare: #fff; a.button culoare: # 000;
Când motorul CSS întâlnește un eticheta cu o clasă de buton, trebuie să determine dacă culoare atributul ar trebui să fie #fff, # 000, sau implicit în browser. Specificitatea CSS este setul de reguli utilizat de browser pentru a face această determinare.
Deci, cum funcționează specificitatea? Utilizați acest sistem de notare ca ghid, preluat direct din CSS Tricks:
Accentsconagua
!important trupeaza pe toti* selectorii primesc un scor de specificitate de toate 0s.Rețineți că în acest sistem de notare, atunci când ceva depășește 10, acesta nu intră în următoarea coloană, de exemplu dacă ați avea un selector cu lungime de 11 elemente, acesta nu s-ar fi vărsat pentru a fi o specificitate de 0, 0,1,1. În schimb, ar fi 0,0,0,11.
Iată câteva selectori și scorurile rezultate.
nav nav / / 0,0,0,3 * / .nav-item / * 0,0,1,0 * / nav. / #logo / * 0,1,0,0 * /
o fundal-culoare: albastru! important; / * În exemplul anterior, am folosit stiluri inline pentru a seta culoarea de fundal în roșu. Cu toate acestea, dacă am aplicat acest stil cu calificativul important, ar trece peste stilul inline. * /
Bine - acum că avem un element de bază în calea specificității CSS, cum ar trebui să influențeze codul nostru? Să ne întoarcem la cele trei reguli pentru specificul CSS.
Această regulă afirmă în esență că selectorii generali ar trebui să fie la începutul CSS-ului dvs., iar selectorii mai specifici ar trebui să apară mai târziu în CSS. Motivele acestei reguli sunt multe.
Mai întâi, plasarea regulilor generale la începutul aplicației dvs. stabilește, de obicei, etapa din codul dvs. pentru crearea modulelor de bază. În legătură cu # 2, având stilurile cel mai puțin specifice la început, vă asigură că scrieți cu cea mai mică specificitate posibilă mai întâi. Mai târziu, pe măsură ce codul dvs. evoluează, adăugarea unor stiluri mai specifice poate deveni necesară pentru suprascrierea sau extinderea stilurilor anterioare.
Stilurile de pe site-ul Apple sunt foarte specifice începând cu foaia de stil
Specificitatea cadrului CSS Pure crește, în general, spre sfârșitul foii de stilAcest lucru duce la al doilea punct: ce se întâmplă când motorul de redare CSS întâlnește doi selectori care au același punctaj? Trebuie să aleagă, deci va opta pentru ultima din cele două reguli. Prin eroare la cel mai puțin specific la începutul fișierului dvs., asigurați-vă că specificațiile dvs. suprascriu sunt mai specifice pe măsură ce treceți mai târziu în fișier. Aceasta înseamnă că o singură clasă mai târziu în fișier ar trebui considerată capabilă să suprascrie singurele clase mai devreme în fișier.
Această practică va asigura că dezvoltarea ulterioară a aceluiași proiect poate înțelege rapid sistemul de cascadă.
Dacă ați fost un dezvoltator de front-end pentru mult timp, probabil că ați experimentat "Războiul de specificitate CSS". Puteți scrie un selector și câteva reguli, apoi reîmprospătați browserul numai pentru a găsi că modificările nu au fost aplicate. Știți din proiectele anterioare sau din conversații despre specificitate, deoarece selectorul dvs. nu este destul de specific, așa că în loc să încercați să identificați problema cu selectorul prea specific, decideți să îl faceți pe cel nou Mai Mult specific. Adăugați un ID sau două, iar dacă nu faceți acest truc, aruncați !important la aceasta. Și, Voila - stilurile tale apar.
Această abordare funcționează, din punct de vedere tehnic; dar, din păcate, oricând doriți să extindeți acel stil, trebuie să continuați să creșteți complexitatea și înainte de a ști că selectorii dvs. sunt extrem specifice, și trebuie să repetați codul în loc să refolosiți pur și simplu clasele. În plus, este aproape imposibil să se determine exact nivelul de specificitate pe care ar trebui să îl aibă stilurile noi fără a adăuga tot mai multe ID-uri și !important declaraţii.
Păstrarea selectorilor dvs. mai puțin specifici este o modalitate mai bună, mai ușor de întreținut pentru a vă ocupa de CSS.
Această regulă este în primul rând în vigoare pentru a evita regulile introduse în mod ciudat. De exemplu, dacă definiți anumite clase pentru prezentarea textului și brusc aveți o regulă care cuibărește șase clase și un ID, acea regulă specială trebuie plasată contextual cu selectori mai specifici, este legată de.
Statisticile CSS vă pot oferi informații despre modul în care este scris CSS, dar acest lucru este util doar dacă aveți o idee despre cum ar trebui să arate acele statistici înainte de a încerca să le analizați. Aceasta înseamnă că aveți o înțelegere contextuală profundă a modului în care este scris CSS și de ce. Dacă CSS este menținut și adecvat pentru site-ul în care este folosit, statisticile acelui CSS nu sunt suficient pentru a vă reface codul.
În loc să urmați regulile de număr orbește, ca dezvoltator responsabil pentru front-end, trebuie să vă concentrați asupra modului în care vă puteți menține codul și să reduceți umflarea. Statisticile despre codul dvs. vă pot ajuta să găsiți zone problematice, dar ele pot merge doar până acum.
