réutiliser son code
Lors de la création d'un site web où les pages ont une organisation et des visuels semblables, on se retrouve souvent à devoir dupliquer son code. Cependant, nous savons que cette pratique, même si elle fonctionne bien au début, mène invariablement à des erreurs, des oublis et à une incohérence des informations présentes sur les différentes parties du site.
Pour éviter cela, nous donnons ici quelques recettes simples pour bien commencer et penser ses pages de manière modulaire.
Nous abordons également les précompilateurs CSS qui permettent de programmer des feuilles de style.
Dans le cadre de pages statiques telles que nous les concevons ici, il n'est pas possible de se reposer sur des mécanismes côté serveur pour pouvoir factoriser son code. Il n'est, par exemple, pas possible de se servir d'inclusions de fichiers dans d'autres comme on peut le faire en PHP.
À partir de ce constat, il faut imaginer d'autres solutions permettant de simuler ce mécanisme. Une piste est de voir le processus de création d'un site comme un ensemble d'étapes dans lesquelles il y a écriture, puis publication.
L'écriture va se concentrer sur le contenu qui est à intégrer dans une structure. C'est sur cette structure que devons travailler et créant des fichiers modèles et des petits scripts permettant de fusionner structure et contenu au moment de la publication.
Par exemple, nous pouvons imaginer un squelette de page qui ressemblerait au fichier présenté ci-dessous. Il faudra le copier et le remplir avec le contenu de la page.
Avec deux fichiers annexes pour compléter le head
et ajouter un footer qui pourraient ressembler à ceci :
Et pour fusionner le tous, avant la publication proprement dite, on pourrait utiliser un script comme celui présenté ci-dessous :
Une fois ceci réalisé pour tous les fichiers, il ne reste plus qu'à les mettre à disposition sur le serveur web. On pourra bien entendu s'assurer que tout est correctement fait avant la publication en mettant en place un serveur local (souvent déjà présent sur votre système d'exploitation).
Tout ceci n'est qu'un ensemble d'exemples qu'il peut être intéressant d'avoir en tête lorsque l'on va se lancer dans l'écriture d'un site. Bien entendu, il serait plus simple d'écrire du PHP par exemple, et de laisser faire tout ça au serveur. C'est un choix. Tous les sites ne nécessitent pas d'être dynamiques et, même s'il y a un mécanisme de cache, c'est à chaque consultation que le serveur devra faire l'inclusion. Dans la méthode proposée, c'est vous qui la faite une seule fois, le serveur n'a ensuite qu'un travail minimal à fournir.
Lors de l'écriture de feuilles des style, même si ce n'est que pour un site donné, il est courant de devoir réécrire les valeurs de certaines propriétés, de vouloir faire des calculs sur des dimensions en fonction de paramètres tels que le média, la largeur de la page, la taille de la police, ... Tout ceci est long et fastidieux et nous avons tous eu envie d'avoir des variables ou des opérateurs mathématiques en CSS. Le W3C commence à introduire les calculs sur les dimensions, mais il n'y a encore rien sur la notion de variables ou de fonctions.
Voilà pourquoi des pré-processeurs de CSS ont vu le jour, permettant de faire tout ça. Ce sont des programmes ou ensembles de programmes qui s'utilisent au moment de la création du site, mais qui n'existent plus lors de la mise en production.
Nous vous invitons à découvrir leurs fonctionnalités et à utiliser celui qui vous conviendra le mieux :