Trois CSS combinées sur ce site

Trois feuilles de style distinctes sont combinées sur cette page Web. La feuille "simple-grid.css" est utilisée pour le positionnement des contenus et leur apparence visuelle, "luxbar.css" est utilisée pour styliser le menu de chaque page et "style.css" est utilisée pour personnaliser le tout.

Combiner des feuilles de style : pourquoi ?

Combiner des feuilles de style permet de savoir clairement à quoi servent chacune d'elles. Combiner les feuilles de styles utilisées ici répond aussi, paradoxalement, à un objectif de simplicité. Ces feuilles de style ont été sélectionnées pour leur fonctionnalité sans code superflu.

On trouve des gabarits de pages Web sur divers sites de ressources (html5up, templated.co, etc). Souvent, les pages collectées sont visuellement intéressantes mais elles sont rarement simples à appréhender côté codage HTML et CSS. Les concepteurs de ces templates utilisent de nombreuses classes CSS et beaucoup de code JavaScript !

Simple Grid et Luxbar font exception : pas de JavaScript dans le code ... et peu de classes CSS ! La combinaison de siple-grid.css et luxbar.css permet de réaliser des sites simples, responsives et d'allure plutôt sympatiques. Le résultat ressemble un peu à ce que propose le site w3schools en utilisant la feuille de style w3css.

En résumé 

La disposition et une partie de la stylisation des contenus des pages de ce site repose sur les instructions CSS contenues dans la feuille de style intitulée simple-grid.css.

L'apparence du menu placé en tête des pages de ce site repose sur les instructions CSS contenues dans la feuille de style intitulée luxbar.css.

Pourquoi une troisième feuille de style ?

Le choix d'une troisième feuille de style est motivé par le fait que simple-grid.css ne répond pas à tous les besoins. La feuille de style téléchargeable sur le site http://simplegrid.io/ prend bien en compte l'indispensable pour la mise en place des éléments sur la grille. Elle propose en bonus quelques éléments de stylisation pour les textes mais cela de suffit pas !

Aussi, pour finaliser ce site, il a été jugé nécessaire de créer une feuille de style complémentaire (nommée "style.css"). Cette dernière feuille de style paramètre notamment l'affichage du code au fil du texte, le rendu des liens et des boutons, le positionnement des images, etc.

Vous remarquerez aussi quelques instructions CSS internes, propres à chaque page du site (pour la couleur des titres h2, par exemple). Cela fait beaucoup de CSS... mais au moins les choses sont claires : on sait à quoi servent chaque feuille de style ! Et tout compte fait, cela demeure encore assez simple. 😊