Archivio > Presentazione, Semantica > Singolo: CSS e classi: Approccio semantico o visuale?

CSS e classi: Approccio semantico o visuale?

Introduzione

[Immagine] Qual è l'approccio migliore da seguire per sviluppare efficacemente layout senza perdere troppo tempo su HTML e CSS ogni qual volta si effettui una modifica? Segue l'articolo sull'approccio semantico e quello visuale, messi a confronto.

Convenzionalmente, quando si realizza un layout per una pagina web, il criterio secondo il quale ID e classi vengono applicati ai singoli elementi HTML segue un approccio ben preciso che spesso viene definito semantico: un header avrà classe .header, un articolo una classe .article e così via (salvo leggere varianti) per ogni blocco di contenuti semanticamente ricco. Eppure, visto da quest’ottica, tale criterio non sembra affatto portare benefici allo sviluppatore, ancor meno all’utente o alla macchina. In definitiva, ha senso parlare di semantica nei CSS? Se sì, quando?

In questo articolo voglio mettere a paragone due scuole di pensiero sostanzialmente diverse: la prima sostiene che un approccio semantico verso ID e classi contribuisce a rendere più logico lo sviluppo dei layout, la seconda testimonia esperienze completamente opposte e suggerisce di etichettare gli elementi secondo la loro funzione estetica, a vantaggio di layout decisamente più modulari.

Essere belli dentro

Quello che definisco approccio semantico consiste nell’assegnare a ciascun tag ID e classi che rispecchino la funzione dell’elemento nella pagina. In tal modo, un box di ricerca sarà definito con un ID o una classe che ne ricalca lo scopo (es. search). Il bello di essere semantici è che, seguendo questo criterio, è possibile creare delle combinazioni logiche sensate per descrivere il ruolo di ogni oggetto.

Poniamo di voler realizzare un editoriale online. Limitiamoci per ora a creare un nostro set personale di classi speciali che fungeranno da etichette per ogni elemento importante delle nostre pagine.

Numerazione:

.last
Ultimo contenuto (secondo un certo criterio)
.first
Primo contenuto (secondo un certo criterio)
.unique
Contenuto unico nel suo contesto (cioè quando per qualche motivo è al tempo stesso primo e ultimo)

Criteri di selezione:

.bydate
Selezione secondo data
.byauthor
Selezione secondo autore
.byrank
Selezione secondo popolarità
.byabc
Selezione alfabetico

Criteri d’ordinamento:

.ascend
Ordinamento ascendente
.descend
Ordinamento discendente

Formato:

.pocket-sized
Contenuto di lunghezza ridotta (specificare il numero di caratteri)
.medium-sized
Contenuto di lunghezza media (specificare il numero di caratteri)
.large-sized
Contenuto di lunghezza significante

Tipologìa:

.list
Lista di contenuti dello stesso tipo
.single
Contenuto singolo (scelto da una lista)

Contenuti speciali:

.article(s)
Articolo/i dell’editoriale
.date-publish
Data di pubblicazion
.date-lastedit
Data dell’ultima modifica
.author(s)
Autore/i dell’articolo
.body
Testo dell’articolo
.categor(y/ies)
Categoria/e in cui il contenuto viene archiviato
.tag(s)
Parola/e chiave o etichette per il contenuto
.comment(s)
Commento/i associato/i al singolo contenuto

A questo punto siamo pronti a costruire le prime combo che ci permetteranno di descrivere in maniera sensata la funzione di ogni elemento all’interno della pagina. Qualche esempio?

.last.article.bydate
Ultimo articolo pubblicato
.articles.list.bydate.medium-sized
Lista degli ultimi articoli pubblicati, in formato medio
.single.article.date-publish
Data di pubblicazione del singolo articolo
.last.comments.bydate
Commenti recenti
.single.article .categories.list .last
Ultima categoria in una lista di categorie associate al singolo articolo
.tags.list.byabc.descend
Lista delle etichette in ordine alfabetico (discendente)

A questo punto nei fogli di stile sarà possibile costruire delle combinazioni predefinite per uniformare alcune proprietà condivise da elementi con la stessa funzione:

.list.bydate { 
    /* Seleziona tutte le liste di contenuto in ordine cronologico */ }
.single.date-publish { 
    /* Seleziona la data del contenuto preso singolarmente */ }
.first { 
    /* Seleziona tutto il contenuto che viene per primo in una lista */ }
.body.pocket-sized { 
    /* Seleziona tutte le sintesi dei contenuti */ }

Si intravedono le potenzialità di un approccio simile? La possibilità di combinare più classi permette da un lato di descrivere efficacemente lo scopo di un elemento, dall’altro di creare un foglio di stile tanto più umano quanto più commestibile (da qui l’aggettivo semantico). Questo approccio inoltre stimola l’utilizzo dei microformati, nati proprio allo scopo di arricchire semanticamente i contenuti delle pagine web tramite un uso ponderato e concordato delle classi.

Fra gli effetti collaterali, quello di continuare a dover applicare modifiche pesanti (a volte drastiche) ai fogli di stile ogni qual volta si decida di modificare il markup. Infatti, laddove funziona bene la descrizione degli elementi, viene a mancare un uso efficace delle classi per permettere modifiche rapide al layout, che in fase di testing e di sviluppo sono pressoché essenziali. Ma poi, perché questo approccio dovrebbe chiamarsi semantico? Può avere senso per un umano, ma niente più. Le macchine continueranno a comportarsi sempre allo stesso modo nei confronti di ID e classi.

Essere belli fuori

Il secondo approccio è quello che io chiamo visuale e che molti hanno definito simpaticamente quello più sexy. Qui siamo alle prese con un criterio che niente ha a che vedere con quello semantico: il trucco è creare delle classi che descrivano senza alcuna vergogna la caratteristica preponderante (a livello estetico) dell’oggetto in questione. Il bello di essere superficiali è che la manutenzione dei layout diventa più semplice ed incentrata unicamente sulla resa grafica degli elementi.

Poniamo anche in questo caso di voler realizzare un editoriale adottando questo approccio. Definiamo, come di consueto, un nostro piccolo vocabolario personale di classi speciali che andranno a descrivere i singoli oggetti.

Allineamento orizzontale:

.center-aligned
Allinea il contenuto al centro
.left-aligned
Allinea il contenuto a sinistra
.right-aligned
Allinea il contenuto a destra
.left-floated
Allinea il contenuto a sinistra usando i float
.right-floated
Allinea il contenuto a destra usando i float

Allineamento verticale:

.top-aligned
Allinea il contenuto in alto
.middle-aligned
Allinea il contenuto in mezzo
.bottom-aligned
Allinea il contenuto in basso

Tipografìa:

.serif
Assegna al contenuto una lista di font scelti fra quelli della famiglia serif
.sans-serif
Assegna al contenuto una lista di font scelti fra quelli della famiglia sans-serif
.monospace
Assegna al contenuto una lista di font scelti fra quelli della famiglia monospace
.fontset-handwritten
Assegna al contenuto una lista di font speciali scelti fra quelli handwritten
.fontset-retro
Assegna al contenuto una lista di font speciali scelti fra quelli retrò
.fontset-trash
Assegna al contenuto una lista di font speciali scelti fra quelli trash

Collocamento:

.inset
Posiziona il contenuto all’interno di un flusso specifico
.outset
Posiziona il contenuto all’esterno di un flusso specifico

Dimensioni:

.small
Il contenuto ha dimensioni ridotte
.medium
Il contenuto ha dimensioni medie
.large
Il contenuto ha dimensioni significanti
.smaller
Riduce le dimensioni
.larger
Aumenta le dimensioni

Colori:

.brown-yellow
Usa uno schema di colori basato sul marrone (primo piano) e giallo (sfondo)
.white-red
Usa uno schema di colori basato sul bianco (primo piano) e rosso (sfondo)
.cyan-black
Usa uno schema di colori basato sul celeste (primo piano) e sul nero (sfondo)
.lighter
Rende lo schema di colori più chiaro
.darker
Rende lo schema di colori più scuro
.inverted
Inverte il colore di primo piano col colore di sfondo

Varie:

.bordered
Aggiunge un bordo particolare al contenuto
.hidden
Il contenuto risulta nascosto

A questo punto con un po’ di magìa possiamo definire combo altrettanto interessanti che ci permetteranno di formattare il contenuto semplicemente combinando assieme le classi desiderate:

img.left-floated.inset.small
Un’immagine decentrata a sinistra e collocata all’interno del normale flusso di contenuti, di dimensioni ridotte (es. la copertina di un libro recensito)
img.bordered.large
Un’immagine con una cornice, entrambe di dimensioni significanti
p.serif.large
Un paragrafo che usa un set di caratteri della famiglia serif di dimensioni significanti (es. un riassunto posto in cima ad un articolo)
th.top-aligned.center-aligned
Una cella d’intestazione il cui contenuto è allineato in alto al centro
div.brown-yellow.lighter.lighter.sans-serif.small
Un blocco marrone su giallo i cui colori sono resi due volte più chiari, con del testo in sans-serif di dimensioni ridotte (es. un avvertimento o una notifica importante)
h3.white-red.inverted.darker.larger
Un’intestazione rosso su bianco i cui colori sono resti più scuri e le dimensioni del testo rese più larghe (es. il titolo di un post)

E’ ovvio che ad esempio nei fogli di stile si possono già costruire combinazioni predefinite delle classi sopracitate per controllare meglio il comportamento a livello visuale di ogni oggetto:

img.floated.small { 
    /* Controlla le immagini decentrate a sinistra e di dimensioni piccole */ }
img.small.serif.small { 
    /* Controlla il testo delle immagini di dimensioni piccole */ }
.brown-yellow.lighter.lighter { 
    /* Controlla ogni contenuto marrone-giallo reso più chiaro del normale */ }
.medium.bordered { 
    /* Controlla il bordo dei contenuti di dimensioni medie */ }

Sono evidenti, anche in questo caso, i vantaggi di tale approccio? Mixando le classi nella giusta dose sarà possibile creare combinazioni di font, colori e dimensioni tali da rendere molto più veloce (e al tempo stesso modulare) la costruzione di un layout. Pensate solo a quanta fatica in meno vi costerà cambiare i colori di un’intestazione o l’allineamento di un’immagine, dal momento che non vi servirà più toccare i fogli di stile ma solo scambiare due o tre classi fra loro (lato HTML) per ottenere un nuovo esplosivo cocktail.

Anche in questo caso, tale pratica può ritorcersi verso di noi. Ad esempio, sarà comunque necessario fare un uso massicco degli ID per specificare quelle proprietà CSS particolari da applicare ad ogni singolo elemento alla volta. D’altronde non tutte le immagini con float avranno gli stessi margini di spaziatura dagli elementi circostanti, no? Questo dovrebbe rendere bene l’idea. L’approccio visuale in sostanza può rendere produttivi ma manca di una parte essenziale che è quella già definita semantica.

Qual è l’approccio migliore, dunque?

Come si suol dire, probabilmente la verità sta nel mezzo. L’approccio semantico funziona bene perché rende descrive con immediatezza la funzione di ogni elemento, mentre quello visuale è amato dai webdesigner perché permette di apportare modifiche al layout con grande semplicità. In entrambi i casi si parla di immediatezza, ma gli scopi sono diversi. Dunque chi vieta di usare classi semantiche e classi visuali al fine di ottenere la miglior esperienza possibile? E’ evidente che il loro uso può essere complementare.

In sostanza l’approccio semantico e quello visuale nei confronti delle classi CSS sono entrambi validi e meritevoli. Un uso sensato di tali pratiche permette di sviluppare layout con più rapidità da un lato e più chiarezza dall’altro. Il suggerimento è quello di provarli entrambi, anche assieme, al fine di scoprire qual è la dose giusta per voi affinché la vostra produttività ne risenta positivamente.

Approfondimenti

L'articolo è stato di tuo gradimento? Puoi controllare che vi sia altro di tuo interesse nelle categorie e , oppure iscriverti al notiziario RSS e seguirmi su per restare sempre aggiornato sulle ultime pubblicazioni.

Pubblicato venerdì 23 gennaio 2009.

Discussione [5]

  1. Davide aggiunge:

    [Immagine] Segue l'intervento di Davide

    Sarà che ho realizzato per lo più temi per il mio blog, motivo per cui avevo pieno controllo del “progetto”, ma fino ad ora ho utilizzato quasi esclusivamente un approccio semantico. Questo perchè ho l’abitudine, prima di darci dentro col markup e con i fogli di stile, di realizzare su carta una bozza di layout, così da avere ben chiaro lo scopo di ogni singolo pezzo di pagina, dopo di che inizio a dare un senso logico ad ognuno di essi attribuendogli una classe specifica.

    In questo modo riesco a ricordare meglio ogni parte della pagina che classe ha, anche dopo mesi, in quanto ho seguito un mio personale criterio, e quindi le modifiche non occupano poi così tanto tempo. Certo, se dovessi stravolgere il layout, sarebbe molto più complesso, ma fino ad ora mi son trovato bene così :)

  2. eKoeS aggiunge:

    [Immagine] Segue l'intervento di eKoeS

    Sarà che ho realizzato per lo più temi per il mio blog, motivo per cui avevo pieno controllo del “progetto”, ma fino ad ora ho utilizzato quasi esclusivamente un approccio semantico. Questo perchè ho l’abitudine, prima di darci dentro col markup e con i fogli di stile, di realizzare su carta una bozza di layout, così da avere ben chiaro lo scopo di ogni singolo pezzo di pagina, dopo di che inizio a dare un senso logico ad ognuno di essi attribuendogli una classe specifica.

    Sì, è un processo che condivido appieno e che ultimamente ho cominciato ad adottare anch’io. Considera anche che l’approccio semantico è quello tuttora maggiormente utilizzato, anche se onestamente non credo che sia sempre l’arma vincente in ogni situazione. Ad esempio, qui su LineHeight ho iniziato a utilizzare, specialmente per la formattazione del testo degli articoli, un approccio visuale che prevede l’utilizzo di classi quali .centered, .floated e così via. Questo mi permette di vedere abbastanza velocemente se un’immagine, ad esempio, sta meglio messa a destra o a sinistra, se una didascalìa è meglio allineata al centro o decentrata, ecc.

    C’è da considerare comunque un certo margine d’errore quando si sviluppano layout. La resa su carta aiuta tantissimo ma non garantisce, come al solito, che il risultato finale sia esattamente così come è stato immaginato. Avere la possibilità di manipolare gli oggetti semplicemente aggiungendo o rimuovendo una serie di classi può essere utile per vedere sul momento quali miglioramenti a livello usabile, accessibile, empatico e così via si possano ottenere. Non escludo nemmeno che un approccio come quello visuale possa essere utile in fase di testing con l’utenza, permettendo di vedere in che modo reagisce l’utente ogni volta che cambia la disposizione degli elementi.

    L’approccio semantico mi sembra vincente sul piano teorico, ma sul piano pratico sarò ben lieto di sperimentare più a fondo quello visuale non appena ne capiterà l’occasione. :)

  3. Massimiliano Arione aggiunge:

    [Immagine] Segue l'intervento di Massimiliano Arione

    Non capisco perché voler creare delle “combo”. Non sarebbe meglio (e più semplice) assegnare direttamente le classi create? Ad esempio, invece di img class=”left-floated.inset.small”, usare img class=”left-floated inset small”.

  4. Simone Economo aggiunge:

    [Immagine] Segue l'intervento di Simone Economo

    Massimiliano, è esattamente quello che ho detto nell’articolo. Gli esempi si riferiscono ad un foglio di stile fittizio e non ad un documento HTML (anche se forse non era così ovvio).

  5. Lioz aggiunge:

    [Immagine] Segue l'intervento di Lioz

    ottimo articolo! secondo me l’approccio semantico ha il grande venataggio di comunicare a prescindere dalla formattazione. Mi sembra che gli standard stiano convergendo verso questa soluzione (vedi RDF e similari)

Discuti

Nome *

Per inviare un commento clicca su Anteprima. Apparirà un nuovo pulsante Invia per confermare.

Guida rapida

  • **grassetto**
  • _corsivo_
  • [testo](link)
  • "citazione breve"
  • > citazione estesa
  • `codice`

Paginatura: