Una dintre cele mai mari probleme din programare este tratarea întreținerii. Într-un scenariu din lumea reală, nu începem întotdeauna să dezvoltăm proiecte de la zero. În cea mai mare parte, ni se atribuie (sau luăm) un proiect care a fost deja scris cu vreo doi ani înainte sau chiar mai mult.

Pentru a lucra eficient la acel proiect, mai întâi trebuie să înțelegem codul sursă. Acesta este punctul în care realizăm imediat importanța cod curat. Ca dezvoltatori, trebuie să încercăm să ne scriem codul cât mai curat posibil.

Acesta este și cazul CSS. Există câteva puncte la care trebuie să fim atenți în timp ce scriem CSS. În această postare, aș dori să vă împărtășesc unele dintre cele mai importante. Cred că aceste 7 sfaturi vă vor ajuta să îmbunătățiți calitatea codului CSS.

Deci, să începem … ‌ ‌

1. USCAT

DRY înseamnă „Nu te repeta”. Acesta este un principiu general de dezvoltare software și poate fi aplicat în orice limbaj de programare, precum și în CSS. După cum putem înțelege din numele său, DRY își propune să evite sau să reducă cât mai mult posibil repetarea.

ad-banner

De exemplu, putem crea 3 clase CSS pentru 3 butoane ca aceasta:

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Sau putem folosi principiul DRY scriind regulile comune o singura data într-o clasă suplimentară și diferitele reguli fiecare în alte clase:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

După cum putem vedea, aplicarea principiului DRY evită repetarea, scade numărul de linii și îmbunătățește lizibilitatea și chiar performanța.

2. Denumirea

Denumirea selectorilor CSS este un alt punct important pentru scrierea unui CSS mai bun. Numele unui selector ar trebui să fie autodescriptiv și lizibil

// BAD NAMING

.p {
  // Rules
}

.myFirstForm {
  // Rules
}

În mod normal,

este o etichetă HTML și înseamnă paragraf. Mai sus, nu putem înțelege cu adevărat ce clasa p este. De asemenea, ar trebui să evitați nume precum myFirstForm, și nu vă sfătuiesc să folosiți carcasă de cămilă.

În schimb, utilizați nume declarative (separate printr-o liniuță pentru mai multe nume):

// GOOD NAMING

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
}

Cred că numele au acum mai mult sens 🙂

Numirea lucrurilor în programare nu este atât de ușoară, dar există diferite convenții de numire pe care le puteți folosi în proiectul dvs. BEM (modificator element bloc) este unul dintre ei. Am mai lucrat cu BEM și îl pot recomanda.

3. Nu utilizați stiluri în linie

Ei bine, există argumente pe web despre acest lucru: unii îți spun să nu folosești niciodată stiluri în linie, în timp ce alții susțin că poate fi util în unele cazuri.

În opinia mea, cea mai bună practică este de fapt să nu folosești stiluri în linie. Mă voi concentra aici asupra motivului pentru care nu ar trebui.

Separarea preocupărilor

Conform principiului separării preocupărilor, proiectarea (CSS), conținutul (HTML) și logica (JavaScript) ar trebui separate prin motive precum o mai bună lizibilitate și întreținere.

Includerea regulilor CSS în etichetele HTML încalcă această regulă:

<div style="font-size: 16px; color: red;">Some Text</div>

Ar trebui mai degrabă să ne păstrăm regulile de stil în fișiere CSS externe.

O altă problemă cu utilizarea stilurilor inline este că nu le putem căuta. Deci, atunci când trebuie să facem o schimbare în stil, căutăm în mod normal selectoare CSS ale elementului HTML.

De exemplu, să schimbăm marimea fontului de text pe pagina noastră web. Pentru a face acest lucru, mai întâi găsim acea parte specifică din browser în care este necesară modificarea, examinând structura HTML:

<div class="text-bold">Some Text</div>

Apoi, trebuie să găsim selectorul, care este text cu caractere aldine clasa aici. În cele din urmă, mergem la acea clasă și facem modificările:

.text-bold {
  font-size: 16px;    // change the font-size to 14px
  font-weight: bold;
}

Dar dacă regulile sunt scrise inline-style în loc să utilizați clase:

<div style="font-size: 16px; font-weight: bold">Some Text</div>

Chiar dacă găsim eticheta HTML, nu putem ști dacă există altele marimea fontului reguli din HTML sau nu. Deoarece nu există niciun selector utilizat, trebuie să parcurgem toate paginile HTML unul câte unul, să încercăm să îl găsim pe celălalt marimea fontului regulile și le schimbă și ele.

Nu ar fi mai ușor cu un selector CSS? Dar e ceva și mai rău …

Specificitate / Probleme de suprascriere

Inline-Styles au cea mai mare specificitate dintre selectoarele CSS (atunci când nu contăm ! etichete importante).

Având în vedere că folosim atât o clasă, cât și un stil inline pentru un element:

.text-bold {
  font-size: 16px;
  font-weight: bold;
}
<div class="text-bold" style="font-size: 14px">Some Text</div>

Aici marimea fontului a textului va fi 14px, deoarece stilurile inline au specificitate mai mare decât clasele CSS. Când faceți o schimbare în clasă:

.text-bold {
  font-size: 20px;
  font-weight: bold;
}

Dimensiunea fontului va fi în continuare de 14 px. Deci, schimbarea dvs. în clasa CSS nu va funcționa, ceea ce vă va determina să ajungeți să spuneți:

“Hei, de ce nu funcționează codul meu CSS? Urăsc CSS!”

și să te conducă să folosești un ! etichetă importantă care face magia:

.text-bold {
  font-size: 20px !important;
  font-weight: bold;
}

Ceea ce este un mare nu și nu ne conduce la punctul următor …

4. Evitați eticheta! Importantă

OK, deci CSS-ul dvs. nu funcționa așa cum trebuia, și ați făcut-o să funcționeze aplicând etichetă importantă:

!important

Ce se întâmplă în continuare? Eticheta! Important are cea mai mare specificitate dintre toți selectorii CSS.

Practic îi spuneți browserului să aplice acea regulă specifică cu ! etichetă importantă întotdeauna și în orice împrejurări. Acest lucru nu este bun, deoarece regulile CSS pot diferi de la un selector la altul, de la selectorul părinte la copil.

Singura modalitate de a suprascrie o etichetă importantă este de a utiliza o altă etichetă importantă. Și acest lucru duce la utilizarea unor etichete din ce în ce mai importante. Crede-mă, în viitorul apropiat, codul proiectului tău va fi plin de!etichete importante, ceea ce face codul dvs. CSS mult mai greu de întreținut. Deci, încercați să nu-l utilizați.

5. Folosiți un preprocesator

Lucrul cu un preprocesor CSS precum Sass sau LESS este foarte util în proiecte mai mari. Un preprocesator aduce caracteristicilor suplimentare codului nostru CSS pe care în mod normal nu le putem face.

De exemplu, putem defini variabile, funcții și combinații, putem importa și exporta fișierele noastre CSS în alte fișiere CSS și putem scrie cod CSS imbricat:

7 sfaturi importante pentru scrierea unui CSS mai bun
Exemplu de cod Sass

Un preprocesator are propria sa sintaxă și mai târziu este tradus în CSS standard (într-un fișier CSS separat) deoarece browserele nu înțeleg sintaxa.

Îmi place să lucrez cu Sass și l-am folosit în diverse proiecte. Am acoperit câteva dintre avantajele utilizării unui preprocesor CSS aici.

6. Utilizați stenografii

Unele dintre proprietățile CSS, cum ar fi umpluturile, marginile, fonturile și marginile pot fi scrise într-un mod mult mai simplu prin stenogramă. Utilizarea stenogramelor ajută la reducerea liniilor de reguli.

Deci, fără prescurtări, o clasă CSS ar arăta astfel:

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid:
  border-color: black;
}

și cu stenografii arată așa:

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

Puteți găsi aici mai multe informații despre cum să utilizați proprietăți de stenogramă și pentru ce proprietăți CSS pot fi aplicate.

7. Adăugați comentarii atunci când este necesar

În mod normal, codul de calitate nu are nevoie de comentarii, deoarece ar trebui să fie deja clar și autodescriptiv. Dar totuși, în unele cazuri, este posibil să fie nevoie să scriem explicații suplimentare.

// Your Comments
.example-class {
  // your rules
}

Deci, atunci când simțiți că unele părți ale codului sunt neclare, atunci nu vă fie teamă să adăugați comentarii (dar, pe de altă parte, asigurați-vă că nu exagerați :)).

Ca dezvoltator Frontend cu câțiva ani de experiență, acestea sunt cele mai importante sfaturi pe care vi le pot sugera pentru îmbunătățirea abilităților dvs. CSS. Dacă aveți întrebări sau credeți că există și alte sfaturi pentru scrierea unui CSS mai bun, nu ezitați să comentați mai jos.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați urmărește-mă pe Youtube!

Mulțumesc că ai citit!