Une feuille de style est un ensemble de règles qui décrit la présentation d’un document : couleurs, polices, marges, mise en page. Sur le web, elle est écrite en CSS et prend le plus souvent la forme d’un fichier .css.
Comment ça marche
Chaque page HTML appelle la feuille de style dans son en-tête. Le navigateur la télécharge une fois, la garde en cache, puis l’applique à toutes les pages qui y font référence.
Les règles peuvent aussi être placées directement dans la page, dans une balise style, ou sur un élément précis. Ces pratiques se justifient ponctuellement, mais elles compliquent la maintenance quand elles se multiplient.
Pourquoi séparer le style du contenu
- Une modification de l’apparence se fait à un seul endroit et s’applique à tout le site.
- Les pages sont plus légères, donc plus rapides à charger.
- Un même contenu peut recevoir plusieurs présentations : écran, téléphone, impression.
Cette séparation facilite aussi une refonte graphique : le contenu reste en place, et une grande partie du travail porte sur la feuille de style.
En pratique
Sur un site WordPress ou une boutique PrestaShop, la feuille de style principale fait partie du thème. Les extensions ajoutent souvent les leurs, ce qui alourdit les pages si personne ne fait le tri.
Sur les projets récents, les feuilles de style sont souvent produites à partir de fichiers sources plus lisibles, en Sass ou en CSS découpé en modules. Elles sont ensuite compressées avant la mise en ligne.
Nous traitons ces questions dans nos travaux de développement et d’optimisation de sites existants.