Top 3 greseli CSS

by radu popescu

februarie 20, 2021

267

Selectori prea lungi

De multe ori, mai ales daca nu folosesti SASS sau LESS, o sa scrii selectori precum cei de mai jos – foarte lungi si repetitivi.

.navigation ul{}
.navigation ul li{}
.navigation ul li a{}
.navigation ul li a:hover{}

Solutia – Foloseste SASS sau LESS si profita de nesting.

.navigation{
   ul{
     li{
       a{
         &:hover{
         }
       }
     }
   }    
 }

Formatarea codului

Cand esti presat de timp incepi sa scrii cod urat. Mai jos e un exemplu bun, care e intalnit des in cazul persoanelor presate de timp sau a incepatorilor. Nu fa asa ceva.

.navigation{color:#fF5A6b;Font-size:12px;border-top:1px solid red;font-weight:bold;}

Solutia – Formateaza codul folosind urmatoarele reguli:

Fiecare proprietate CSS ar trebui sa fie pe un rand nou
Foloseste doar litere mari la codurile de culoare HEX
Ai grija la consistenta CAPS; toate proprietatile si valorile ar trebui sa fie scrise cu litere mici
Consistenta culorilor e importanta, foloseste doar valori HEX/RGB vs. numele culorilor
Nu pune proprietatile alfabetic ci grupeaza-le in functie elementul la care se aplica
Foloseste indentarea de 2 spatii pentru proprietati

.navigation{
  color:#FF5A6B;
  font-size:12px;
  font-weight:bold;
  border-top:1px solid red;
}

Refactorizare CSS

Desi nu reusesc sa fac acest lucru de fiecare data, e bine ca spre finalul proiectului sa mai arunci un ochi peste codul tau si sa il optimizezi aplicand urmatoarele lucruri: