Le migliori pratiche CSS da seguire e cattive abitudini da evitare

Da un pò di tempo non dedico un pò del mio tempo a scrivere un’articolo del mio Blog, oggi finalmente l’ho trovato e vorrei riprendere il discorso parlando di CSS e la mia sfida di oggi sarà cercare di creare un set di regole CSS seguendo una determinata metodologia.

Attraverso la pratica, si dovrebbe essere in grado di evitare errori CSS. Elencheremo per darvi una mano in tal senso le migliori pratiche CSS seguire, così come le cattive abitudini da evitare.

Le Migliori Pratiche CSS

Usare CSS reset

Il diverso Rendering dei vari browser sul mercato rappresenta uno dei maggiori problemi che attualmente lo sviluppatore front-end deve affrontare quotidianamente. Infatti, Stili come margini, padding, altezze, intestazioni, dimensioni dei caratteri in base al browser utilizzato dall’utente può apparire diverso su diversi browser. L’obiettivo che vogliamo raggiungere con un foglio di stile di reset è quello di ridurre tali incongruenze, fornendo dei stili di carattere generali che possono essere modificati o addirittura estesi.

Un foglio di stile CSS di reset di riferimento uno dei migliori in circolazione è normalize.css, che potete scaricare cliccando dal precedente link. Le uniche operazioni che dovete fare è  includere il file css nella vostra pagina HTML nella sezione Head.

Organizzare Elementi sul foglio di stile da cima a fondo

Mettere il vostro titolo, autore, tag, descrizione, informazioni indirizzo e così via sul vostro foglio di stile. Questo darà l’utente / sviluppatore di una persona di riferimento da contattare ogni volta che hanno bisogno di sostegno per quanto riguarda la vostra creazione.

Per esempio:

/*

Theme Name: GM Website

Description: Css Reset

Author: Giovanni Masucci

Author URI: http://www.giovannimasucci.it

Tags: Css, Website

*/
Di seguito prendiamo come esempio la struttura del codice sottostante.

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

body {...}
h1, h2, h3 {..}
p {...}
a {...}
/****** Stili Header *********/
#header {...}
/****** Stili Navigazione *********/
#nav {...}
/****** Stili Footer *********/
#footer {...}

Ridurre le dimensioni del file CSS con compressori CSS

Per poter ridurre le dimensioni di un file CSS, sarà fondamentale ridurre gli spazi bianchi, le interruzioni di riga e  rimuovere gli stili CSS ridondanti. Grazie a queste buone regole è possibile aiutare i browser a velocizzare il caricamento dei codici CSS. Potremmo utilizzare a tale scopo alcuni strument come CSS Compressor e CSS Compressor Minifier.

css-compressor

css-minifier

 ID e classi che rientrano nella stessa elemento del gruppo

Se si dispone di un elemento che contiene diversi ID e classi, si potrebbe desiderare di raggrupparli per organizzarli è renderli  e facile da trovare, quindi alla ricerca di errori non ci sarebbe voluto tempo. A titolo di esempio, si dispone di un contenitore di classe che contiene un tag div che ha un ID di logo e un altro tag div che ha un ID di icone.
<div>
           <div id=”logo”></div>
           <div id=”titolo”></div>
</div>
È possibile raggruppare sul vostro codice CSS in questo modo:
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.

Per i colore utilizzare codice esadecimale anzichè Nome Colore

Secondo diversi test effettuati, utilizzare i codici esadecimali sembra essere più veloce del nome del colore. Puoi verificarlo qui. Pertanto, si consiglia l’utilizzo di codici esadecimali piuttosto che i colori dei nomi.

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;}

Rivolti Margin e Padding posizioni separatamente

Utilizzo di codici CSS separati per l’obiettivo di margine o padding sia in alto, a sinistra, a destra o in basso non è una buona idea. Mischiare il codice  combinandolo in una riga per rendere il codice più leggibile e rende il caricamento dei browser più veloce.

 

Ad esempio, si ha un div con un’ id di contenitore e devi indicare tutti i margini delle posizioni separatamente. Come segue:

Cattiva Pratica

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

Si può semplicemente combinare tutti questi stili in una sola riga come segue.

Buona Pratica

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

Utilizzo di sottolineatura su ID o il nome di classeSe utilizzante l’uderscore per il naming dei vostri id potrebbe dare risultati inutili su vecchi browser. Si consiglia vivamente di utilizzare i trattini.Date un’occhiata al seguente esempio.

Cattiva Pratica

left_col {margin: 0; padding: 0;}

Buona Pratica

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

Conclusioni

In questo articolo, ho cercato di evidenziare alcuni trucchi e linee guida da seguire per scrivere  un codice CSS migliore e quali sono eventualmente gli errori da evitare. Se riuscite a seguire queste semplici regole mentre scrivete il vostro codice vi aiuterà a realizzare  codici puliti e vi impedirà di perdere tempo prezioso a cercare in futuro errori. Alla Prossima

Giovanni Masucci

Digital Media Specialist

 

 
Be Sociable, Share!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *