Semantica e regole di classi e id nei CSS
Quando si scrive un’applicazione è buona norma seguire le norme e le convenzioni del linguaggio scelto.
I programmatori infatti stilano delle convenzioni per identificare più facilmente i nomi di classi, funzioni e variabili. Anche nel web design, quando si parla di html e css, ci sono delle convenzioni da rispettare per rendere il codice più facile da modificare e più significativo.
Come tutti saprete il codice viene diviso in html e css, per poter essere gestito meglio. Da una parte si tratta la struttura della pagina, tramite html. I paragrafi avranno il tag <p>, gli elementi di una lista il tag <li>, e via dicendo.
Quando poi si dovranno presentare le informazioni si useranno i css, che andranno a beccare i vari tag nella pagina html a cui sono legati e ne regoleranno font, colori, bordi, ecc.
Questa divisione tra struttura della pagina e presentazione non avviene solamente quando si mettono tutti gli elementi di stile in un file e si lascia il codice html pulito, ma anche quando si scrivono le classi e gli id dei tag.
Classi e id infatti devono essere scritti in modo da rispettare il contenuto presente nell’html.
Gli identificatori (id)
Facciamo un esempio pratico. Abbiamo un div al cui interno caricheremo le ultime notizie. Questo <div> sarà poi messo a sinistra, mentre a destra avremo un altro <div>, al cui interno caricheremo una galleria di immagini.
A questo punto molto spesso potrebbe venire la tentazione di dare i seguenti nomi agli id dei due tag <div>: quello a sinistra lo chiameremo #box-sinistra e quello a destra #box-destra. Sembra tutto ok, perché alla fine è lì che andremo a piazzare i due box. Sbagliato!
Chiamando i due div rispettivamente #box-sinistra e box-destra noi stiamo assegnando loro una posizione nel codice html. Cosa succederà quando decideremo di cambiare il layout e di spostare #box-sinistra a destra e #box-destra a sinistra? Se vi siete sentiti confusi da questa frase (io sì) figuratevi quando dovrete mettere mano al codice.
Questo è il primo motivo per cui dovremmo chiamare i due tag <div> rispettivamente #news e #galleria.
Il vantaggio in questo caso non è solo la minore confusione, ma anche l’aver descritto il contenuto per una più facile ricognizione.
Cosa succede, ad esempio, se un’altra persona deve mettere mano al codice? Cosa ne può sapere che il #box-sinistra sono le news e il #box-destra è la galleria? Facilitargli la vita è una questione di cortesia ma è anche indice di professionalità.
Le classi
Stesso discorso si applica alle classi. Se vogliamo evidenziare un pezzettino di testo potremmo essere tentati di creare un tag <span> a cui assegnare una classe chiamata .giallo. Il testo colorato di giallo ci soddisfa, e per i primi mesi tutto fila liscio. All’improvviso però gli scienziati scoprono che lo sfondo giallo aumenta le vendite del 500%, e bisogna immediatamente cambiare il colore dello sfondo e anche dell’evidenziatore.
Ma oltre 600 articoli ormai hanno al loro interno l’infame tag <span class=”giallo”> e per quanto si possa cambiare il suo valore nel codice css, sarà alquanto confusionario avere una classe chiamata giallo che evidenzia di rosso il testo.
Sarebbe stato molto meglio nominare quella classe semplicemente come .importante.
Infine un ultimo dubbio che potrebbe sorgere. Se una classe è formata da due parole, ad esempio contenuto e principale, è meglio usare la forma contenuto-principale, contenutoPrincipale o contenutoprincipale?
Io personalmente preferisco contenuto-principale perché mi sembra più leggibile e inoltre mi aiuta a distinguerlo meglio da eventuali variabili o funzioni javascript.
In ogni caso eviterei la forma contenutoprincipale perché è sicuramente la più confusionaria.
N.B. di Lauryn: quando trovate ad esempio: class=”contenuto principale” il foglio css interpreta questa indicazione come due classi distinte, cosa che è perfettamente plausibile. Infatti l’uso di doppie classi permette una gestione più articolata per layout complessi.
Seguire queste convenzioni sembra a prima vista una cosa quasi marginale, ma a lungo termine ringrazierete voi stessi di aver preso una così buona abitudine. Senza contare che è anche in queste piccole cose che si vede la differenza tra un sito che funziona ed un sito che funziona ed è ben fatto.
Aggiungi a Google
8 Commenti
quoto pienamente
[...] This post was mentioned on Twitter by Laura Gargiulo, Piero Tagliapietra. Piero Tagliapietra said: Semantica e regole di classi e id nei CSS http://bit.ly/ar0dDG [...]
Sono d’accordissimo. Ad essere ordinati possibilmente si prede un pò di tempo in più all’inizio ma sicuramente, questa attenzione ripaga.
Grazie per l’articolo.
L’articolo è molto interessante, integrerei però scrivendo la differenza tra ID e classe ed indicando in che casi utilizzare gli uni piuttosto che gli altri!
Concordo su tutto, sia sulla convenzione dei nomi, sia sull’uso del trattino al posto della “regola del cammello” che uso invece per funzioni e variabili in js e php.
Quando si tratta di modificare template o di aggiungere id/classi in un sito che usa già un css altrui (come nel caso di jQueryUI), aggiungo sempre la mia iniziale per evitare di sovrascrivere qualcosa.
Grazie del complimento, ed anche del consiglio, inizialmente l’idea dell’articolo era qualcosa del tipo “Convenzioni di nomenclatura per i CSS”, per questo non ci ho proprio pensato, grazie.
L’argomento è veramente molto interessante, non ch affascinante per una persona come me che si affaccia solo ora in questo mondo. Avrei da chiederti se per caso hai da indicarmi libri che trattino questo argomento. Grazie
I libri in Italiano per iniziare sono stati consigliati qui:
http://www.italianwebdesign.it/webdesign-un-percorso-di-studi-per-tutti/