Come aggiungere commenti ai fogli di stile CSS (CSS)

Ogni sito web è costituito da elementi strutturali (che sono dettati da HTML), funzionali e stilistici. I CSS (Cascading Style Sheets) sono usati per dettare l'aspetto (il "look and feel") di un sito web. Questi stili sono tenuti separati dalla struttura HTML per consentire facilità di aggiornamento e aderenza agli standard web.

Il problema con i fogli di stile

Con le dimensioni e la complessità di molti siti Web oggi, i fogli di stile possono diventare piuttosto lunghi e ingombranti. Ciò è particolarmente vero ora che le query multimediali per gli stili di siti Web reattivi sono una parte essenziale del design, assicurando che un sito Web appaia come dovrebbe indipendentemente dal dispositivo. Solo quelle media query possono aggiungere un numero significativo di nuovi stili a un documento CSS, rendendo ancora più difficile il lavoro. È qui che i commenti CSS possono diventare un aiuto prezioso per i progettisti e gli sviluppatori di siti web.

Commenti Aggiungi struttura e chiarezza

Aggiungere commenti ai file CSS di un sito Web è un ottimo modo per organizzare sezioni di quel codice per un lettore umano che sta rivedendo il documento. Garantisce inoltre la coerenza quando un professionista del web riprende da dove un altro si allontana o quando un gruppo di persone lavora su un sito.

I commenti ben formattati possono comunicare aspetti importanti del foglio di stile ai membri di un team che potrebbero non avere già familiarità con il codice. Questi commenti sono anche molto utili per le persone che hanno già lavorato sul sito ma non hanno recentemente; i web designer di solito 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 nei browser Web. Questi commenti sono solo informativi, proprio come i commenti HTML (sebbene la sintassi sia diversa). Questi commenti CSS non influenzano in alcun modo la visualizzazione visiva di un sito.

Aggiunta di commenti CSS

L'aggiunta di un commento CSS è abbastanza semplice. Semplicemente registri il tuo commento con i tag di apertura e chiusura dei commenti corretti:

Inizia il tuo commento aggiungendo
/*
Chiudi il tuo commento aggiungendo
*/

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 di bordo rosso * / div # border_red { bordo: rosso solido sottile; }/*******************************************************Stile per il testo del codice*******************************************************/

Scomponendo le sezioni

Molti designer organizzano fogli di stile in blocchi piccoli e facilmente digeribili, facili da scansionare durante la lettura. In genere, i commenti vengono preceduti e seguiti da serie di trattini che creano rotture grandi e evidenti nella pagina che sono facili da vedere. Ecco un esempio:

/ * ----------------------- Stili intestazione ----------------------- ------- * /
Questi commenti indicano l'inizio di una nuova sezione di codifica.

Codice "Commenting Out"

Poiché i tag di commento dicono al browser di ignorare tutto ciò che li separa, puoi usarli per disattivare temporaneamente alcune parti del codice CSS. Questo può essere utile durante il debug o quando si regola la formattazione della pagina Web. In effetti, i progettisti li usano spesso per "commentare" o "disattivare" le aree di codice per vedere cosa succede se quella sezione non fa parte della pagina.

Per fare ciò, aggiungi semplicemente il tag di commento di apertura prima del codice che desideri commentare (disabilita); posiziona il tag di chiusura nel punto in cui desideri che la porzione disabilitata termini. Niente tra questi tag influenzerà la visualizzazione visiva di un sito, consentendo di eseguire il debug del CSS per vedere dove sta accadendo un problema. Puoi quindi entrare e correggere solo quel problema e rimuovere i commenti dal codice.

Suggerimenti per la creazione di commenti CSS

Come riepilogo, ecco alcuni suggerimenti da ricordare per l'utilizzo di commenti nel tuo CSS:

I commenti possono estendersi su più righe.

I commenti possono includere elementi CSS che non si desidera che un browser esegua il rendering ma che non si desidera eliminare completamente. Ricorda di rimuovere gli stili non utilizzati (invece di lasciarli commentati) se decidi di non averne bisogno sul sito web.

Usa i commenti ogni volta che scrivi complicato CSS per aggiungere strutture, chiarire le decisioni di progettazione e informare gli sviluppatori futuri (o ricordarti di te) di importanti considerazioni. Ciò consente di risparmiare tempo in futuro per tutti i soggetti coinvolti.

I commenti possono anche includere informazioni meta come:

Autore

Data di creazione

Diritto d'autore

Prestazione

Anche se aggiungere troppi commenti può influire sulla velocità e le prestazioni del download di un sito, non dovresti esitare a utilizzarli. Ci vorranno molte righe di commenti per avere un impatto negativo significativo. Come tanti aspetti del web design, tutto si riduce all'equilibrio.