Come scrivere CSS – parte 2

Titolo:	Come scrivere CSS – parte 2
Sezione:	WEB
Data:	18.09.2018

Oggi passiamo alla seconda parte di ” Come scrivere CSS ...

Oggi passiamo alla seconda parte di ” Come scrivere CSS ” . Alcuni interessanti e anche utili suggerimenti su come migliorare leggibilità e scrittura del nostro css.

Immagini come sfondo
Quando aggiungi immagini al tuo design, specialmente se sarà responsivo, usa un tag <div> con la proprietà CSS di background anziché gli elementi <img>.

Potrebbe sembrare del lavoro in più senza un vero vantaggio, ma in realtà rende più semplice la gestione delle immagini, mantenendo dimensioni e proporzioni originali, grazie alle proprietà background-size, background-position ( ed altre ).
Uno svantaggio di questa tecnica è l’accessibilità al web in quanto le immagini non verranno scansionate correttamente dai lettori e motori di ricerca. Questo problema può essere risolto con object-fit ma non ha ancora il supporto completo di tutti i browsers.

Eliminare doppi bordi nelle tabelle
Spesso le tabelle in HTML sono impossibili da rendere responsive e nel complesso difficili da stilizzare. L’aggiunta di bordi spesso crea delle ripetizioni e un modo rapido per rimuoverle tutte è utilizzare la proprietà border-collapse: collapse .

Scrivere commenti migliori
Alcuni semplici commenti sono sufficienti per organizzare un foglio di stile e renderlo più accessibile ai tuoi colleghi o a te stesso in future manutenzioni.

Per sezioni di componenti principali o query multimediali, utilizzare un commento stilizzato :

/*---------------
    #Header
---------------*/

Componenti meno importanti possono essere contrassegnati con un commento a riga singola.

/*   Footer Buttons   */
.footer button { }

kebab-case
I nomi delle classi e gli id devono essere scritti con un trattino (-) quando contengono più di una parola. Il CSS non fa distinzione tra maiuscole e minuscole, quindi il camelCase non è un’opzione. I caratteri di sottolineatura non erano supportati, mentre ora lo sono e ciò ha reso i trattini la convenzione predefinita.

/* Sì*/
.footer-column-left {} .footer_column_left {}

/ * No * /
.footerColumnLeft {}

Non duplicare regole: evitare la ripetizione e usare l’eredità .
I valori per la maggior parte delle proprietà CSS vengono ereditati dall’elemento un livello in alto nell’albero DOM, da cui il nome Cascading Style Sheets. Prendiamo ad esempio la proprietà font: è quasi sempre ereditata dal genitore, non è necessario impostarla di nuovo separatamente per ogni singolo elemento della pagina. È sufficiente aggiungere gli stili di carattere che saranno più prevalenti nella progettazione all’elemento <html> o <body> e lasciarli scorrere verso il basso. In seguito puoi sempre modificare gli stili per ogni dato elemento.

Kenji Agency : realizzazione siti web a Treviso