WEB

Come scrivere CSS – parte 2

Oggi passiamo alla seconda parte di ” ... leggi a seguire ->

css-realizzazione-siti-web-treviso

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-sizebackground-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

Share this Post:

Articoli correlati