Le migliori pratiche CSS da seguire e cattive abitudini da evitare

container {width: 960px; margin: 0;  padding: 0;}.
container #logo {font-family: Arial, sans-serif;  font-size: 30px;  color: red;}.
container #titolo {font-family: Verdana; font-size: 10px;}

Utilizzare Annotazioni / Commenti di individuare una serie di CSS

Un’altra ottima pratica per la codifica CSS sta nel mettere un commento su ciascun gruppo di CSS. In questo modo sarà più facile trovare gruppi di blocchi di CSS se eventualmente ci fossero dei problemi.

/****** Stili Generali *********/

body{
	margin: 0;
	padding: 0;
	width: 100%;
}

h1, h2, h3 {
    font-family: Arial, sans-serif;
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

Convenzione sui nomi della Struttura

Utilizzare delle convenzioni per nominare i vostri ID e classi farà la differenza per il vostro lavoro. Questo vi aiuterà a rendere il vostro lavoro più facile e più veloce.

Ad esempio, se voi indicherete il nome di una classe title-rosso non avrà senso quando dovrete cambiare il colore del titolo, invece indicate semplicemente titolo. Quindi è buona regola nominare sempre ii elementi in base al loro effettivo uso non sulle loro proprietà, come ad esempio il colore o la dimensione del font che l’elemento deve avere.

Usare CSS del fornitore come prefisso

Se conoscete le nuove caratteristiche di CSS3,  dovreste anche sapere che ogni browser ha una sua specifica quando si tratta di uno stile specifico. Ecco perché i prefissi del browser vengono utilizzati per fare in modo che il browser supporta la specifica funzionalità / stile che si desidera utilizzare. Molti designer e sviluppatori stanno avendo problemi con questa semplice regola, perché si sono dimenticati di aggiungere prefissi vendor per indirizzare browser specifici.I prefissi CSS dei vari browser sono i seguenti:

• Chrome: -webkit-
• Firefox: -moz-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

Facciamo un esempio, se desiderate aggiungere una transizione CSS3 al codice CSS, sarà sufficiente utilizzare la proprietà di transizione con un prefisso fornitore. Come nel codice che segue:

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Convalida CSS

Utilizzando W3C Validator che è gratuito, puoi sapere se il tuo codice CSS è stato adeguatamente strutturato. Un altro vantaggio di usarlo è che può puntare l’errore nel foglio di stile, quindi, di risparmiare più tempo sulla risoluzione dei problemi manualmente.

Le Cattive Abitudini da evitare nei CSS

Creazione ridondante CSS

Utilizzo nuovi stili per gli stessi elementi non è una buona pratica. E ‘molto importante ripulire il codice e rimuovere stili ridondanti. Ad esempio, se si dispone di un tag e span tag di paragrafo che ha la stessa dimensione del carattere e il colore, si potrebbe riportarlo in un solo gruppo utilizzando una virgola.

Date un’occhiata al codice di seguito.

Cattiva Pratica

span {font-size: 12px; color: red;}
p {font-size: 12px; color: red;}

Buona Pratica

span, p {font-size: 12px; color: red;}

Mescolando i nomi dei tag con ID o Nome classe

Aggiunta nome del tag a un ID o a un nome di classe non è una buona pratica perché farebbe rallentare il processo inutilmente.

Cattiva Pratica

p#container {color: red; font-size: 8px;}

Buona Pratica

#container {color: red; font-size: 8px;}

Cattiva Pratica

#container {
margin-top: 10px;
margin-right: 2px;
margin-left: 5px;
margin-bottom: 14px;
}

Buona Pratica

#container {margin: 10px 2px 5px 14px;}

Cattiva Pratica

left_col {margin: 0; padding: 0;}

Buona Pratica

left-col {margin: 0; padding: 0;}