Cele mai bune practici CSS: nouă semne ale unui CSS defect
Publicat: 2020-12-16CSS sau Cascading Style Sheets - Limbajul care definește modul în care ar trebui să arate o pagină web și, uneori, să se comporte. Este adesea trecut cu vederea de către dezvoltatorii web ca un limbaj „ușor” care nu necesită prea multă atenție. Memorarea unora dintre cele mai comune proprietăți, fluxul general și căutarea proprietăților mai obscure este calea de urmat. Dar, după cum știu dezvoltatorii mai experimentați, niciun limbaj nu merită să fie trecut cu vederea, deoarece există întotdeauna modalități bune și rele de a face ceva.
Cu CSS, este foarte ușor să faceți lucrurile într-un mod greșit, deoarece nu există un compilator care aruncă erori, nu există avertismente sau notificări pentru implementări greșite. Un limbaj de programare precum JavaScript are o mulțime de instrumente care urmăresc o bună calitate a codului, unii chiar trimit mesaje către dezvoltator că o anumită funcție nu a fost implementată în modul corect.
În acest post relativ scurt vom analiza unele dintre problemele obișnuite cu care se confruntă dezvoltatorii și cum să le remediem. Nu este vorba despre detalii de implementare specifice pentru o anumită componentă vizuală. În schimb, lista se concentrează pe procesele de gândire, arhitectura și abordările.
Complexitatea CSS
Este CSS greu? Nu! Cu siguranță nu, are câteva reguli structurale foarte elementare. Aveți selectoare (clasă, id, element), aveți proprietăți și aveți domeniu de aplicare. Este mult mai puțin decât un limbaj precum C, Java sau PHP. Un dezvoltator poate obține întreaga idee în câteva minute de citit și de a începe stilarea. Desigur, pentru a cunoaște diferența dintre margine și căptușeală, puteți arunca o privire la w3schools, dar când să utilizați, ceea ce va necesita ceva experiență. Dar nu este știință despre rachete.
Acum, ceea ce face lucrurile un pic mai complexe sunt toate modurile în care selectează cursa pentru care ajunge să suprascrie următoarea și modul în care o proprietate afectează alta (display: block vs display: inline de exemplu). Apoi avem detalii mai mici, cum ar fi prăbușirea marjei, stivuirea indexului z, proprietățile de performanță ale GPU vs.
Pe lângă toate acestea, noile caracteristici CSS care nu sunt întotdeauna implementate în același mod în toate browserele, unele chiar nu sunt implementate deloc, iar altele necesită proprietăți diferite.
Dacă ne uităm la cele două paragrafe de mai sus, vom vedea cele două etape principale pe care dezvoltatorii front-end le-au lovit atunci când lucrează cu CSS - Una este „ Oh, asta e tot? ” Iar al doilea este„ Oh ****, asta nu a fost tot ”. Iată ce înseamnă „complexitate CSS”
Există o mulțime de lucruri mici între ele care sunt greu de mărit. Dacă construiți o singură componentă, este ușor - stilizați orice vedeți și funcționează. Dar puneți acea componentă într-o aplicație mai mare și se vor aplica stiluri suplimentare. S-ar putea să aveți aceeași clasă ca și altceva (cum ar fi .button), iar stilurile dvs. vor fi aplicate pe întreaga aplicație, rupând totul. Este stresant!
WordPress CSS: Ghid de bază pentru începători
Cum se scrie CSS: combaterea complexității sale
Există câteva soluții pe care oamenii inteligenți au venit, o prezentare generală ar fi:
- Convenții de denumire CSS, cum ar fi BEM, SMACSS și altele, care definesc reguli ale numelor de clase care ar reduce posibilitatea de ciocniri.
- CSS în JS este o metodă mai nouă care vă permite practic să scrieți componente CSS în fișiere JS (sună rău, arată rău, dar are un sens cel puțin). Valabil în cea mai mare parte cu React, Vue și altele.
- CSS Modules este o abordare mai sănătoasă a CSS în JS pentru cineva care ajunge cu toate stilurile într-un singur fișier. Modulele CSS încapsulează stilurile fiecărei componente, astfel încât să nu poată scurge la alte componente, facilitând reutilizarea. De asemenea, reduce mult stresul!
Primul - Convențiile de numire este probabil cel mai greu de implementat, deoarece nu are instrumente care să vă ajute. Vă lasă totul ca dezvoltator să înțelegeți și să aplicați convenția. Încă trebuie să vă gândiți la numele claselor, tot nu trebuie să se ciocnească și atunci trebuie să faceți întreaga echipă să o urmeze. Destul de greu!
CSS în modulele JS și CSS sunt remedieri de implementare. Acestea schimbă ieșirea codului ca întreg, ceea ce face practic imposibilă scurgerea stilurilor. Dar necesită o gândire complet diferită și o configurare a construirii, ceva care nu este întotdeauna realizabil sau dorit.
Cel mai bun sfat aici ar fi: Studiați cele mai frecvente și de succes convenții de denumire, utilizați-l pe cel care se potrivește standardelor de codare ale companiei dvs. sau ale ecosistemului. Înțelegeți separarea componentelor și începeți să gândiți în termeni de domeniu și unități unice care construiesc o aplicație mare. Nu este o aplicație mare de la început, care ar fi imposibil de gestionat.
Dacă lucrați la o stivă care include o bibliotecă precum React sau un cadru precum Vue, atunci căutați în instrumente suplimentare care vă permit să vă gestionați stilurile cu ele. Pentru orice dezvoltator CSS de nivel începător până la mediu, ar fi un mare ajutor! Și s-ar putea să nu doriți niciodată să le renunțați, cu excepția cazului în care vi se întâmplă ceva mai bun.
Fii atent la noile instrumente! Ne împiedică să luptăm împotriva problemelor pe care comunitatea de dezvoltatori le-a găsit deja, le-a remediat și le-a oferit o modalitate de a le rezolva.
Acum, că am subliniat ce înseamnă CSS Complexity și câteva sfaturi de început despre combaterea acesteia, să ne aruncăm într-o imagine de ansamblu mai detaliată și să oferim exemple directe.
Sfaturi pentru proiectarea site-urilor web: Cum să vă intensificați jocul în proiectarea web
Nouă semne ale unui CSS defect
Această listă cu siguranță nu este completă, nici cu un kilometru lung. Din păcate, vă veți confrunta cu nenumărate alte probleme și, sperăm, veți găsi soluții directe la o anumită problemă pe site-uri precum Stackoverflow.
Cu toate acestea, dacă doriți să vă intensificați jocul, atunci când remediați o problemă cu câteva linii de css, trebuie să înțelegeți ce fac. De ce a trebuit să vă schimbați marcajul și de ce ați trebuit să schimbați câțiva selectori, proprietăți?
Marginile acționează ciudat
O problemă obișnuită cu care se confruntă dezvoltatorii este atunci când două elemente nu își adaugă marginile (sus / jos). De exemplu, avem două elemente <p> cu margine: 20px 0 ;. Spațiul total dintre ele este de 20 px, nu de 40. Acest lucru se datorează prăbușirii marginii. Cu excepția cazului în care elementele plutesc sau sunt poziționate absolut. Acest „Cu excepția” este aproape peste tot pentru aproape fiecare definiție.
Z-index: 9999999 și încă nu este peste z-index: 1
În primul rând, rareori este nevoie să scrieți astfel de indici z mari. Am văzut chiar valori precum 99999999999999 sau mai mult. În primul rând, valoarea maximă a indexului z este 2147483647, deci orice de mai sus este inutil. În al doilea rând, nu funcționează așa. Ce elemente sunt deasupra este definit de contextul de stivuire, nu numai de valoarea indexului z. Vedeți graficul de mai jos:
Nu animă proprietățile potrivite
Este o întrebare destul de simplă, dar unii dezvoltatori se luptă atunci când vine vorba de animații și abordarea de adoptat. În primul rând, ce poate fi animat? Orice lucru care poate avea o valoare inițială, o valoare finală și orice altceva între ele. Opacitatea este o astfel de proprietate, puteți începe de la 0, puteți termina pe 1 și puteți adăuga pași infiniti între 0,3, 0,6758, 0,9875 etc. Nu puteți anima „afișarea” deoarece nu există pași de mijloc între linie și grilă.
Animații ineficiente
Cel mai frecvent motiv pentru FPS-uri proaste la animații se datorează proprietăților greșite care sunt animate. Dacă modificați proprietatea „stânga” a unui element absolut, veți utiliza CPU pentru a calcula. Cu toate acestea, dacă utilizați transform, atunci ar fi GPU. Și GPU, așa cum știm cu toții, este mai bine să faceți grafică.

Dar cum ați anima umbra, atunci când nu are altă alternativă ca stânga / transformare? Ei bine, animă opacitatea! Au două elemente, unul cu start, stare, unul cu stare finală. Apoi estompează începutul și sfârșitul. Acest lucru ar face să pară că umbra se extinde, unde de fapt doar se estompează.
NU animați elemente care afectează aspectul, dacă este posibil. Calculele de aspect sunt costisitoare și un procesor poate face doar o cantitate limitată de calcule. Adesea, mai puțin de unul la fiecare 16 ms, ceea ce va duce la FPS sub 60.
Selectoare prea profunde
Ce este un modificator? O clasă pe care o puteți adăuga la o altă clasă și puteți înlocui unele dintre proprietățile sale. Exemplu: butonul are culoare: roșu. .button-primar, are culoare: albastru. Deci, atunci când adăugați .button-primar la .button, doriți să ajungeți la o culoare albastră. Ușor de țăran. Deși, nu de fiecare dată este atât de ușor. Și nu de fiecare dată este o componentă ca aceasta.
Uneori, dorim să suprascriem o componentă, copilul unei alte componente pe o anumită pagină. Așa că ajungem cu așa ceva: .page-name .section-name .component-1 .component-2 {...} Deja patru niveluri adâncime. Dar ceea ce se dovedește este că putem pur și simplu să facem .page-name .componen-2 {...}. Mai scurt este mai bine! Pentru că, dacă se întâmplă ca, dintr-un motiv sau altul, să suprascrieți noul stil, nu trebuie să mergeți cu 5 niveluri adânc, apoi 6, apoi mai mult.
Selectorele profunde sunt înfricoșătoare și oamenii ajung să folosească! Important. ! important ar trebui să fie utilizat atunci când doriți să suprascrieți stiluri inline pe care nu le aveți control. În caz contrar, este un steag roșu că nu faci ceva corect.
Fișier prea mare
Acum, desigur, pentru o aplicație mare ar exista o mulțime de stiluri, iar acest lucru este complet de înțeles. Dar este întotdeauna atât de mare? Un mod greșit de a extinde clasele în SASS (prin mixins) ar genera lanțuri de selecție mari, care necesită câteva secunde pentru a derula pentru a le vedea pe toate. O extensie adecvată ar reduce mult fișierul respectiv. S-ar putea chiar dubla dimensiunea.
Cadrele incluse, dintre care doar câteva proprietăți sunt utilizate sunt, de asemenea, un motiv obișnuit pentru fișierele mari. Puneți împreună bootstrap / fundație, font-awesome, animate.css și câteva alte cadre / biblioteci similare și veți ajunge cu un fișier imens din care utilizați aproximativ 2%. Curățați-l, păstrați-l ordonat și folosiți doar ceea ce este cu adevărat necesar. De multe ori nu este nevoie nici măcar de un cadru.
Cadrul atunci când nu este necesar
Bootstrap, Foundation, UIKit și toate celelalte cadre sunt grozave! Rezolvă o problemă reală și sunt extrem de valoroși pentru comunitatea de dezvoltare web. Nu este nevoie să cunoașteți HTML sau CSS atât de bine pentru a crea tablouri de bord și site-uri. Dar îndepărtați-vă de acest caz, începeți să scrieți CSS și veți întâlni câteva probleme.
- Trebuie să înțelegeți corect cum să le construiți și cum să le includeți
- Trebuie să le citiți documentația pentru a găsi setările personalizate și mixurile pe care le furnizează.
- Trebuie să le urmăriți marcajul și să vă învățați echipa să facă acest lucru.
- Trebuie să înțelegeți cu adevărat cum să extindeți și să stilizați pentru a crea o vizualizare unică.
A le include în mod corespunzător înseamnă că folosiți doar ceea ce aveți nevoie. Pentru ca un astfel de cadru să vă ajute în loc să vă interzică să construiți ceva personalizat, trebuie să știți că funcționează interioare mai bine decât media. Și pentru a obține orice design personalizat, va trebui să modificați setările și proprietățile. Și apoi scrieți câteva CSS personalizate. Și acel CSS personalizat pentru a suprascrie orice oferă cadrul.
Deci, dacă nu este nevoie reală de un astfel de cadru CSS, dar există încă unul și nu a fost utilizat în mod corespunzător, acesta este un semnal roșu că ceva nu este în regulă. Și când începeți o dată cu el, cel mai probabil veți ajunge să îl utilizați până la sfârșitul ciclului de viață al proiectului. Deci este o decizie importantă.
Nu permite conținutului să definească dimensiunea
Aceasta este mai mult o problemă de nivel pentru începători, dar este una foarte comună. Ar trebui să oferiți conținutului libertatea pe care o merită.
De exemplu, nu doriți să setați proprietatea de lățime a site-ului la 1200 px. Doriți să setați lățimea maximă la 1200 px. În acest fel, ecranul va permite site-ului dvs. să rămână receptiv.
Apoi, un câmp de intrare nu ar trebui să aibă 40px înălțime, ar trebui să aibă o umplutură 1em. Acum, dimensiunea fontului, conținutul este ceea ce definește dimensiunea. Și dacă conținutul din interior crește, elementul nu se va sparge.
Acest mod de gândire la definirea dimensiunilor rămâne important pe întreaga aplicație. Și fiecare proprietate trebuie să o ia în considerare. În mod ideal, nu setați% pentru lățime pe zona de conținut, deoarece atunci trebuie să scrieți și interogări media.
Dacă ați avut lățimea maximă, atunci când browserul dvs. se micșorează sub acea lățime maximă, conținutul va umple lățimea browserului și apoi se va micșora normal. Altfel, ar trebui să scrieți o interogare media pentru acea dimensiune. Și apoi pentru orice altă dimensiune personalizată scrisă pe site. Aceasta este complexitatea adăugată datorită abordării proaste. Aproape la fel ca toate celelalte puncte pe care le-am discutat deja.
Hacks JavaScript
JavaScript poate face minuni! Dar nu este întotdeauna nevoie. Puteți face atât de multe doar cu CSS care este bine acceptat, nu necesită funcționalitate (care este cel mai bine testat automat după aceea) și nu cere celorlalți membri ai FE să cunoască și JS.
Desigur, există funcționalitatea standard de comutare, unde puteți utiliza o casetă de selectare pentru a schimba stilurile atunci când: bifată, există suprapunerea de fundal care poate fi declanșată cu ușurință și există proprietăți precum contorul pentru a crea mai multe liste simple decât <ol> .
Sfatul de aici este să căutați mai întâi soluții CSS. Să presupunem că doriți să creați un popup. Se afișează în mijloc (poziție: fixă). Apoi, doriți să o închideți din pictograma [X] sau când faceți clic în jurul acesteia. În JS ar trebui să scrieți evenimente care să se declanșeze pe orice, cu excepția conținutului pop-up. Dar încă declanșează pe [X] care se află în conținutul pop-up.
În schimb, din CSS puteți scrie doar un alt <div> care are dimensiunea 100vw, 100vh și indexul z chiar sub fereastra pop-up. Apoi, puteți pur și simplu viza acel div în JS, care este un singur liner.
Un alt exemplu - doriți un buton pe care să îl puteți plasa în conținut, care va „extinde” orice conținut care îl urmează. Simplu cu CSS, ceva mai complex cu JS. Cu CSS puteți face așa ceva:
Label.button - stilează butonul vizual.
Intrare: not (: bifat) ~ * {display: none} - ascundeți totul după el în același container.
Acel bit „în același container”, aveți nevoie de logică personalizată în JS. De asemenea, trebuie să selectați toate elementele, ceea ce necesită parcurgerea arborelui DOM. Și apoi aplicați-le stiluri CSS, care ar ajunge în eticheta style = ””, ceea ce la rândul său ar necesita! Important dacă dintr-un anumit motiv trebuie să le adresați. În CSS, din fericire, este extrem de simplu.
Calea către a deveni un bun web designer
Concluzie
După cum puteți vedea, acestea sunt foarte puține probleme obișnuite. Pentru a le acoperi pe toate, ar fi nevoie de o carte. Dar, sperăm, vă vor oferi un bun punct de plecare și vă vor reaminti să vă gândiți la orice problemă potențială care ar putea apărea din cauza unei abordări greșite. Localizarea unor astfel de probleme vine cu o mulțime de experiență și multă lectură. Și dacă ați ajuns la concluzia aici, atunci sunteți pe drumul cel bun cu citirea, acum este timpul să vă exersați!
Retenere pentru dezvoltare DevriX WordPress
Dezvoltare pe termen lung, asistență și inovație pentru platforma dvs. WordPress. DevriX oferă parteneriat tehnic pentru IMM-uri și start-up-uri rapide. Construim soluții WordPress și platforme de scară care generează până la 20.000.000 de pagini afișate pe lună.