{"id":15890,"date":"2013-08-13T09:00:00","date_gmt":"2013-08-13T07:00:00","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=15890"},"modified":"2023-02-27T14:39:58","modified_gmt":"2023-02-27T14:39:58","slug":"css-best-practices-scrivere-al-meglio-i-fogli-di-stile","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/css-best-practices-scrivere-al-meglio-i-fogli-di-stile\/","title":{"rendered":"CSS best practices: scrivere al meglio i fogli di stile"},"content":{"rendered":"

Imparate le regole di base, scrivere un foglio di stile CSS<\/strong> risulta essere un\u2019operazione piuttosto semplice: diamo il nome a un elemento all\u2019interno del DOM e richiamiamolo all\u2019interno del CSS con gli stili che desideriamo applicargli. Voil\u00e0!<\/p>\n

Nell\u2019articolo di questa settimana, vorrei invece portarvi a scavare pi\u00f9 a fondo nel mondo dei CSS per capire quali sono le buone norme da adottare che vi permetteranno di strutturare i vostri fogli di stile in modo pulito<\/strong>, comprensibile<\/strong> e mantenibile<\/strong>.<\/p>\n

Premessa: non utilizzare stili inline!<\/strong> Potrebbe sembrare comodo in alcuni contesti, ma la mancata separazione tra contenuto e design rende il nostro sito molto pi\u00f9 difficile da mantenere (oltre a non essere pulito). Se consideriamo, ad esempio, che a un certo punto potremmo volerne cambiare la grafica, si spender\u00e0 molto tempo a cercare e modificare gli stili dichiarati all\u2019interno delle pagine rispetto ad averli in un foglio CSS. Oltretutto, la nostra pagina web diventer\u00e0 pi\u00f9 pesante e meno accessibile ai motori di ricerca, talvolta anche agli screen readers utilizzati da persone affette da disabilit\u00e0.<\/p>\n

Vediamo ora quali sono le best practices per realizzare fogli di stile CSS<\/strong>:<\/p>\n

Unificazione delle regole di base dei CSS per tutti i Browser<\/h2>\n

Ciascun browser assegna delle regole di stile diverse agli elementi del markup HTML. Per avere una base uniforme da cui partire, i metodi pi\u00f9 comuni sono di utilizzare un reset<\/strong> per azzerare tutti i parametri (come il reset di Eric Meyer<\/a>) oppure di normalizzare<\/strong> le caratteristiche dei tag HTML utilizzando normalize.css<\/a>. Il secondo metodo pu\u00f2 essere preferibile rispetto al primo poich\u00e8 agisce solo sulle differenze tra vari browser, mantenendo cos\u00ec gli stili di default utili senza doverli riscrivere. Per un approfondimento su normalize, consultate questo link<\/a>.<\/p>\n

Separazione in fogli di stile diversi<\/h2>\n

Quando il nostro foglio di stile comincia a comporsi di qualche migliaia di righe diventer\u00e0 un po\u2019 pi\u00f9 difficile da mantenere e separarlo in fogli di stile differenti<\/strong> potrebbe migliorare il flusso di lavoro nonch\u00e8 dar\u00e0 maggior consistenza al nostro progetto.<\/p>\n

La separazione dei fogli di stile potrebbe essere pensata in modi differenti a seconda di come \u00e8 strutturato il sito, ma di base potremmo avere:<\/p>\n