Top 3 greseli CSS

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:

• Sterge codul care nu mai e folosit
• Grupeaza codul pe sectiuni si scrie-l in ordinea logica
• Comentarii cat mai multe
• Utilizare mixins
• Utilizare variabile