---
title: "Top 3 greseli CSS"
description: "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..."
url: https://blogdeit.ro/top-3-greseli-css
date: 2021-02-20
modified: 2021-07-20
author: "Radu Popescu"
image: https://blogdeit.ro/wp-content/uploads/2021/07/vdi-coding.jpg
categories: ["Coding"]
tags: ["code", "css", "tutorial css", "web design"]
type: post
lang: en
---

# 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