Ogni sito web è composto da elementi strutturali, funzionali e stilistici. Fogli di stile dettare l'aspetto (il "look and feel") di un sito web. Questi stili sono tenuti separati dalla struttura HTML per consentire un facile aggiornamento e aderenza agli standard web.
Il problema con i fogli di stile
Con le dimensioni e la complessità di molti siti web odierni, i fogli di stile possono diventare piuttosto lunghi e macchinosi. Questo problema è cresciuto in complessità ora che query multimediali media per stili di siti web reattivi sono una parte essenziale del design, garantendo che un sito web appaia come dovrebbe indipendentemente dal dispositivo. Queste query multimediali da sole possono aggiungere un numero significativo di nuovi stili a un documento CSS, rendendo ancora più difficile il lavoro. Gestire questa complessità è dove i commenti CSS possono diventare un aiuto inestimabile per i progettisti e gli sviluppatori di siti web.
I commenti aggiungono struttura e chiarezza
L'aggiunta di commenti ai file CSS di un sito Web organizza sezioni di quel codice per un lettore umano che esamina il documento. Garantisce inoltre la coerenza quando un professionista del Web riprende da dove un altro si ferma o quando team di persone lavorano su un sito.
I commenti ben formattati comunicano aspetti importanti del foglio di stile ai membri di un team che potrebbero non avere familiarità con il codice. Questi commenti sono utili anche per le persone che hanno già lavorato sul sito ma non l'hanno fatto di recente; I web designer in genere lavorano su molti siti e ricordare le strategie di progettazione da uno all'altro è difficile.
Solo per gli occhi dei professionisti
I commenti CSS non vengono visualizzati quando la pagina viene visualizzata in browser web. Questi commenti sono solo informativi, proprio come Commenti HTML sono (sebbene la sintassi sia diversa). Questi commenti CSS non influiscono in alcun modo sulla visualizzazione di un sito.
Aggiunta di commenti CSS
Aggiungere un commento CSS è abbastanza facile. Prenota il tuo commento con i tag di commento di apertura e chiusura corretti:
Inizia il tuo commento aggiungendo /* e chiudilo con */.
Tutto ciò che appare tra questi due tag è il contenuto del commento, visibile solo nel codice e non reso dal browser.
Un commento CSS può occupare un numero qualsiasi di righe. Ecco due esempi:
/* esempio bordo rosso */
div#border_red {
bordo: rosso solido sottile;
}
/***************************
****************************
Stile per il testo del codice
****************************
***************************/
Scomposizione delle sezioni
Molti designer organizzano i fogli di stile in piccoli blocchi facilmente digeribili che sono facili da scansionare durante la lettura. In genere, vedrai commenti preceduti e seguiti da una serie di trattini che creano interruzioni grandi e evidenti nella pagina che sono facili da vedere. Ecco un esempio:
/* Stili di intestazione */
Questi commenti indicano l'inizio di una nuova sezione di codifica.
Codice per i commenti
Poiché i tag di commento dicono al browser di ignorare tutto ciò che c'è tra di loro, puoi usarli per disabilitare temporaneamente alcune parti del codice CSS. Questo trucco può essere utile durante il debug o quando si regola la formattazione della pagina web. Infatti, i designer li usano spesso per "commentare" o "disattivare" aree di codice per vedere cosa succede se quella sezione non fa parte della pagina.
Aggiungi il tag del commento di apertura prima del codice che desideri commentare (disabilita); posiziona il tag di chiusura dove vuoi che termini la parte disabilitata. Niente tra questi tag influenzerà la visualizzazione di un sito, aiutandoti a eseguire il debug del CSS per vedere dove si verifica un problema. Puoi quindi entrare e correggere solo quel problema tecnico e quindi rimuovere i commenti dal codice.
Suggerimenti per i commenti CSS
Molti programmatori includono blocchi di commento nella parte superiore di ogni nuovo file con codice. Imita quella strategia includendo un blocco di commenti con il tuo nome, le date rilevanti e le informazioni correlate per aiutarti le persone comprendono il contesto di un progetto e non solo le decisioni su ciò che accade in relazione a un codice specifico bloccare.