CSS / @import
Utiliser la propriété @import en CSS
La propriété @import en CSS3 permet d'importer une autre feuille de style.
Cependant, pour des raisons de performances web, il est déconseillé de l'utiliser.
Si cette propriété à été inventée mais est déconseillée, à quoi donc peut-elle servir ?
L'@import pour l'humain
la propriété @import a été inventée pour permettre des développements CSS plus faciles.
Modularité
La modularité (aussi appelée extensibilité en technologie XML) est la possibilité d'ajouter aisément des modules, des extensions spécifiques afin d'étendre ou d'améliorer simplement les capacités du système.
Cette modularité permet d'utiliser des bouts de code déjà développés à droite et à gauche pour d'autres usages (ou par d'autres personnes) et de les intégrer facilement dans le code.
Elle permet aussi de changer facilement un morceau sans changer la totalité et donc de minimiser les modifications.
Cette modularité permet de développer souplement des CSS par objet et non pas par structure. Il est plus aisé de développer un bout de code pour styler un bouton, une barre de menu, un titre, indépendamment du reste. Ainsi, vous pouvez déveloper plusieurs styles pour un même objet et changer le style appliqué simplement en important le bon fichier grâce à @import.
Lisibilité
Il est plus aisé de lire et manipuler un petit fichier qu'un énorme fichier.
Grâce à @import, il est possible d'avoir de petits fichers CSS à manipuler et de mieux visualiser les dépendances (et donc l'aborescence des dépendances).
L'@import pour la machine
Lors du chargement d'une CSS, le navigateur analyse le code et interroge le serveur web sur tous les @import, ce qui génère des requêtes et du trafic supplémentaires et une baisse de performances.
Comment faire ?
A priori, les deux méthodes ne sont pas compatibles.
Faut-il gagner en lisibilité et modularité mais perdre en performances ?
Ou bien faut-il privilégier la performance quitte à obtenir un code abscons ?
Ce n'est que du code
Du CSS n'est que du code. Et du code, c'est du texte. Et du texte, c'est bien car c'est aisément manipulable grâce à un ensemble d'outils développés à l'époque où toute l'informatique n'était pas graphique mais sous la forme de texte. Certes, ça remonte à loin, mais c'est toujours d'actualité car, malgré toutes les interfaces graphiques, il y a toujours du code à taper. La preuve : le CSS n'est que du code écrit en clair, dans un fichier texte, tout comme le HTML, le XML, etc.
En respectant certaines règles simples, il est donc possible de satisfaire les exigences de chacun.
Règles d'écriture
Les règles d'écritures sont simples : toujours mettre les @import à la fin du fichier CSS.
Si, pour des raisons particulières, un code doit être placé après les imports, alors il faut l'inclure lui-même dans un fichier à part et l'appeler depuis son fichier d'origine.
Compilation
Il ne reste plas qu'à compiler les CSS pour générer le code optimalisé pour la machine : un seul fichier pour les contrôler tous.
Pour compiler, un petit script UNIX suffit.
Vous pouvez télécharger csscompiler ici.
Il vous suffit ensuite de le lancer via ligne de commande :
csscompiler.sh -s "/ma/source/racine.css" -o "/ma/cible/compilée/fichier.css"