Cele mai bune practici CSS: 16 moduri de a vă îmbunătăți rapid abilitățile CSS

Ești începător în CSS și te întrebi în mod constant dacă faci lucrurile bine? Te-ai întrebat vreodată dacă markup-ul tău este la egalitate? Dacă da, este clar momentul să învățați câteva dintre cele mai bune practici CSS.

Respectând instrucțiunile de bază pentru scrierea CSS, vă puteți asigura că produceți cod curat, lizibil și ușor de acceptat. Știi, genul care îi lasă pe alții să înțeleagă ce face și care te face mândru să privești.

Dacă unul dintre aceste lucruri (sau ambele) este ceva la care aspirați, să vorbim despre cele mai bune practici CSS care vă permit să faceți acest lucru.

1. Faceți-vă codul ușor de citit

Formatarea corectă asigură că codul este lizibil pentru dvs. și pentru alți dezvoltatori umani. Deși nu este necesar ca mașinile (adică browserele) să se execute, este pur și simplu o bună practică să vă faceți CSS ușor de citit. Procedând astfel, este mai confortabil de înțeles, întreținut și de lucru.

Am scris un articol întreg despre formatarea codului și comentarii, așa că nu vom repeta totul aici. Cu toate acestea, iată o prezentare generală rapidă (verificați articolul pentru întregul lucru):

• Indentați codul - Indiferent dacă utilizați file sau mai multe spații (decideți câte!), asigurați-vă că vă indentați perechile de valori CSS. Când utilizați interogări media, plasați-le unul în celălalt pentru a arăta dependența.
• Utilizați întreruperi de linie — Separați proprietățile CSS distincte cu întreruperi de linie și puneți perechile de valori pe propria linie.
• Aranjați regulile în ordine alfabetică — Astfel, este mai ușor să găsiți ceea ce căutați.
• Utilizați comentarii — Includeți comentarii pentru a separa diferite secțiuni ale foii de stil unele de altele. În plus, luați în considerare includerea unui cuprins la începutul fișierului. De asemenea, puteți lăsa comentarii cu informații importante pe care s-ar putea să le uitați mai târziu sau care sunt importante pentru a înțelege prezența unor markupuri (de exemplu, alternative pentru browsere mai vechi).

Iată un exemplu de cod CSS bine formatat:

 .search-submit { border-radius: 0 2px 2px 0; bottom: 0; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; width: 42px; } @media screen and (min-width: 56.875em) { .site-header { padding-right: 4.5455%; padding-left: 4.5455%; } }

Deși există convenții diferite pentru formatarea marcajului CSS, partea importantă este că rămâneți consecvent. Nimic nu face ca un fișier CSS sau autorul său să pară mai dezordonat decât formatarea inconsecventă. Deci, stabiliți-vă preferințele și rămâneți cu ele. Dacă există un ghid de stil, rămâneți cu acesta.

Când rămâi consecvent, chiar dacă încurci totul, este mult mai ușor să corectezi toate aceleași greșeli deodată (mulțumesc, caută și înlocuiește!).

2. Formatați bine foaia de stil

Nu numai că ar trebui să vă faceți codul lizibil, ci și să vă asigurați că foile de stil CSS sunt ușor de manevrat și bine organizate. Iată câteva sfaturi și cele mai bune practici pentru asta:

• Utilizați o abordare de sus în jos — Ordonați stilurile în fișierul dvs. așa cum sunt redate în browser. Aceasta înseamnă că treceți de la reguli mai generale la un marcaj mai specific. De exemplu, începeți cu body , a , p , apoi titluri, apoi elemente mai specifice.
• Împărțiți fișierele în secțiuni — Grupați stilurile în zone tematice: tipografie, linkuri, navigare etc. Chiar și paginile individuale pot avea propria lor secțiune dacă au propriul stil. Consultați, de asemenea, sfaturile anterioare despre comentarii și crearea unui cuprins. În plus, puteți face comentarii pentru a marca anumite secțiuni.
• Utilizați foi de stil separate pentru proiecte mari — Dacă marcajul dvs. va include mii de linii de coduri, ar putea fi logic să îl împărțiți în mai multe fișiere pentru diferite secțiuni ale site-ului dvs. Acest lucru este valabil mai ales dacă acele secțiuni au stiluri foarte diferite (de exemplu, un magazin online vs o pagină despre). În acest caz, o foaie mai mare pentru stiluri globale și fișiere mai mici separate pentru anumite secțiuni ale site-ului au mai mult sens.

3. Eliberați-vă de redundanță

Codul redundant este un cod care ocupă mai mult spațiu decât are nevoie. Se încarcă mai lent și este, de asemenea, mai greu de întreținut și de depanat. Prin urmare, este important să evitați redundanța acolo unde este posibil. Iată câteva sfaturi pentru asta:

• Utilizați DRY („Nu vă repetați”) — Verificați dacă există repetări în marcaj. Îți fac codul mai lent și mai greu de citit. Definiți lucrurile o dată, apoi suprascrieți-le mai jos, dacă este necesar.
• Profitați de prescurtarea CSS — CSS oferă multe posibilități de a defini mai multe proprietăți simultan. De exemplu, margin-top , margin-bottom , margin-right și margin-left pot fi toate definite cu o singură declarație margin . Ocupă mai puțin spațiu, folosește mai puțin cod și funcționează la fel de bine, rezultând performanțe mai bune.
• Combinați selectoare acolo unde este posibil — Dacă mai multe elemente, cum ar fi definițiile tipografiei pentru titluri și paragrafe, vor împărtăși aceleași stiluri, asigurați-vă că le combinați pe toate într-un singur set de reguli de apel. Nu este nevoie să repetați același marcaj separat.
• Evitați selectorii redundanți — Fiți atât de specific pe cât trebuie să fiți cu selectorii dvs. pentru a obține rezultatul, dar nu mai departe. Aderarea la aceasta face, de asemenea, mai ușoară suprascrierea markupurilor cu CSS mai specifice, dacă este necesar. Dimpotrivă, evitați selectoarele foarte largi, deoarece acestea folosesc mai multă putere de procesare.

4. Important: Evitați !important

Următorul în cele mai bune practici CSS este să încercați să evitați pe cât posibil să folosiți eticheta !important .

Probabil știți că aceasta este opțiunea nucleară pentru ca o declarație CSS să se propage până la capăt în cascadă fără a fi suprascrisă. Problema este că, dacă te bazezi prea mult pe el, s-ar putea să ai nevoie de multe dintre ele, ceea ce va duce la ca codul tău CSS să sfârșească în ceea ce numim o mizerie (pentru a folosi termenul tehnic).

Adevărul este că, dacă te bazezi pe !important pentru ca marcajul să funcționeze, probabil că trebuie să petreci ceva mai mult timp învățând despre specificul CSS. Dacă știi cum funcționează specificitatea, de obicei nu este atât de greu să creezi un selector mai direcționat pentru a suprascrie ceea ce trebuie să fie suprascris.

Alte cazuri în care !important este adesea folosit sunt stilurile inline sau foile de stil externe. Dacă întâlnești acestea, ar trebui să o folosești ca pe o oportunitate de a te gândi la o organizare și o structură mai bună a stilurilor tale, în loc să devină nucleare.

Pe scurt, rezervați !important pentru scopuri de testare, dar evitați-l în mediile de producție.

5. Luați în considerare utilizarea unui cadru

Cadrele CSS pot fi foarte utile și vă pot ajuta să începeți rapid. Ca și alte cadre, acestea vin cu elemente preconfigurate pe care le puteți folosi pentru a crea layout-uri rapid și fără a fi nevoie să începeți de la zero. Dacă doriți să aflați mai multe despre cadrele CSS, puteți căuta în Tailwind, Bootstrap sau Bulma.

În același timp, există o mare avertizare: introduceți un cadru în proiectul dvs. doar dacă îl veți folosi cu adevărat. În caz contrar, probabil că îți va afecta performanța. Dacă vă angajați într-un cadru pentru o singură caracteristică, acesta trebuie totuși să încarce întreaga foaie de stil pentru a funcționa. După cum vă puteți imagina, acesta este adesea mult mai mult cod decât merită.

Deci, dacă vă treziți să suprascrieți stilurile de cadru sau să le piratați altfel, probabil că nu ar trebui să îl utilizați.

6. Utilizați o resetare/normalizare CSS

Resetările apar la începutul unei foi de stil și definesc un număr de proprietăți implicite, cum ar fi înălțimea liniei, marginile, culorile de fundal etc. pentru site-ul dvs. web. Acest lucru ajută la eliminarea inconsecvențelor de proiectare în diferite browsere și creează o bază comună. Iată un exemplu:

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Cele de mai sus sunt de la MeyerWeb, una dintre cele mai populare soluții. De asemenea, puteți căuta în Normalize.css.

7. Accesibilitate încorporată în designul dvs

A-ți face site-ul accesibil înseamnă a-l face utilizabil pentru cât mai mulți oameni, indiferent de abilități. CSS-ul tău joacă un rol important în acest sens, așa că haideți să trecem peste câteva dintre cele mai bune practici pentru aceasta:

• Oferiți suficient contrast — Asigurați-vă că aveți suficientă variație între culorile din prim-plan (de exemplu, text) și de fundal, astfel încât persoanele cu deficiențe de vedere să le poată citi. Puteți folosi un verificator de contrast pentru asta. În mod similar, faceți-vă linkurile colorate, astfel încât să fie recunoscute. În plus, utilizați o dimensiune suficient de mare a fontului (cel puțin 18-20px).
• Păstrați proprietatea outline — Contururile sunt esențiale pentru persoanele care navighează pe site-ul dvs. cu o tastatură sau cititoare de ecran. Acestea ajută la urmărirea elementului activ. Daca nu iti place felul in care arata conturul tau, ai posibilitatea de a-l coafa. Mai multe informații despre asta aici.
• Păstrați vizibile elementele de trecere cu mouse -ul — În mod similar, asigurați-vă că sfaturile instrumente sau alte elemente care apar atunci când treceți cu mouse-ul peste un element apar și atunci când sunt selectate prin filă. Căutați rolurile ARIA pentru asta.

Pentru multe dintre cele de mai sus, cunoașterea pseudo-elementelor este foarte utilă. Mai multe despre CSS și accesibilitate aici.

8. Evitați editarea directă a foilor de stil temă în WordPress

WordPress vine cu o mulțime de CSS, majoritatea rezidând în foi de stil temă (cu excepția cazului în care utilizați o temă bloc). Dacă planul tău este să faci modificări stilului temei, cea mai proastă idee este să editezi direct style.css .

De ce?

Deoarece data viitoare când faceți clic pe butonul Actualizați acum pentru tema dvs. (sau data viitoare când vor începe actualizările automate), toate modificările dvs. vor fi șterse.

Deci, ce să faci în schimb?

Dacă plănuiți doar modificări mai mici, puteți utiliza secțiunea CSS suplimentară din Personalizatorul WordPress.

Este dovada actualizării și vă injectează CSS direct în secțiunea <head> a site-ului dvs.

În caz contrar, pentru modificări mai mari, utilizați o temă copil. Orice ați introdus în foaia de stil va suprascrie ceea ce este în tema părinte și, de asemenea, rămâne la o actualizare a temei.

9. Sfaturi rapide pentru cele mai bune practici CSS

În regulă, pentru secțiunea finală, vă vom oferi câteva dintre cele mai bune practici CSS rapide de reținut:

• Aflați despre clase vs ID -uri — Clasele și IF-urile sunt folosite în moduri foarte diferite. Clasele sunt pentru elemente repetate, ID-uri pentru elemente unice. Pentru mai multe informații, avem un articol întreg despre asta.
• Alegeți flex și grid în loc de float — Floaturile erau o modalitate principală de a aranja elementele web la stânga și la dreapta și de a crea machete. Până acum aveți sisteme solide pentru asta, cu flexbox și grid, așa că profitați de timp și folosiți-le.
• Profitați de preprocesoare — Preprocesoarele vă ajută să vă organizați marcajul, să evitați repetarea, să adauge modularizarea, să ofere automatizare și multe altele. În vremuri de variabile personalizate, acestea nu mai sunt atât de necesare, dar totuși utile. Cele mai populare sunt SASS, LESS și Stylus. De asemenea, puteți căuta postprocesoare precum PostCSS și autoprefixer.
• Utilizați unități relative — În zilele de design responsive și site-uri web afișate pe o gamă largă de dimensiuni de ecran, ar trebui să vă bazați de obicei pe unități precum em , rem , % și alte dimensiuni relative. Dimensiunile fixe, cum ar fi px , sunt doar pentru anumite scenarii.
• Minimizează-ți CSS - Minimizarea elimină toate lucrurile din cod care sunt necesare pentru citirea umană (adică tot ce ți-am spus mai devreme). Cu toate acestea, browserele nu au nevoie de formatare specială și de reducere la minimum pentru fișiere mai mici și încărcare mai rapidă, așa că mergeți! Autoptimize este un plugin grozav care poate face acest lucru automat.
• Eliminați marcajul neutilizat — Din motive similare celor de mai sus, verificați codul pentru marcaj care nu este de fapt utilizat în paginile dvs. și eliminați-l. Acest lucru vă va micșora și mai mult fișierele. Avem și un articol întreg pe acest subiect.
• Utilizați un validator CSS — Validați-vă CSS pentru a verifica marcajul pentru utilizarea corectă. Există suficiente instrumente online pentru asta.

Cele mai bune practici CSS sunt o bază excelentă pentru învățare ulterioară

Când intri pentru prima dată în CSS, poate fi puțin copleșitor. Sunt atât de multe de învățat și multe de învățat. Prin adoptarea devreme a celor mai bune practici CSS, vă oferiți o bază bună pentru a continua să învățați.

Mai sus, am acoperit o serie dintre cele mai importante practici de adoptat. Acesta nu este de departe tot ce trebuie știut în ceea ce privește cele mai bune practici CSS, dar este un loc bun de început. Sperăm să vă bucurați de călătoria voastră!

Ce alte bune practici CSS considerați că este absolut esențial să cunoașteți? Spune-ne în secțiunea de comentarii de mai jos!