CSS : La Règle @import, une bonne pratique

Comments :0
Tags: @import, css, feuille de styles, règle d'import css, w3c

L’article a pour but principal de présenter la règle CSS @import et d’en montrer l’utilisation. Cette méthode vous permettra de mieux organiser l’architecture CSS d’un ou plusieurs sites.

 

Importer une feuille de styles :

la règle CSS @import à pour fonction de permettre l’importation de styles depuis d’autres feuilles de styles. La spécification du W3C  nous indique qu’il est impératif que toutes les règles @import soient placées avant tout autre propriétés/règles à l’exception du @charset si cette balise est présente.

La règle import doit avoir comme valeur une URL, relative ou absolue, spécifiée par la syntaxe url(" ")

De ce fait, pour procéder à l’importation d’une feuille de style depuis une autre, vous devez écrire dans votre css :

@import "styles.css";

ou

@import url("styles.css");

 

Importer une feuille de styles par média

Vous pouvez indiquer pour quel type de média vous souhaitez faire l’import d’un CSS, il vous suffit juste de le spécifier après l’URL. De plus, si vous souhaitez importer cette feuille de styles pour plusieurs médias, vous devrez juste écrire tous les médias en les séparants par une virgule comme ci-dessous :

@import url("styles.css") video;
@import url("styles.css") video, tv;

Si aucun média n’est spécifié, la feuille de style sera importée pour tous les types.

Attention, l’importation de feuille de styles pour les médias spécifiques via une règle @import n’est pas réellement encore répendu sur l’ensemble des navigateurs, il est conseillé de faire des tests de compatibilité afin de détecter un éventuel problème avant la mise en ligne du site.

 

Principe d’utilisation de la règle @import :

En premier lieu, vous devez séparer les feuilles de styles pour bien dissocier les différents éléments. Cette pratique permet à une personne reprennant votre CSS de pouvoir retrouver rapidement des éléments dans votre code, en effet, il n’est pas toujours simple de tomber sur un fichier CSS de 3 ou 4000 lignes pour rechercher un élément. Scroller use la souris à force…

Vous pourrez donc par exemple organiser vos feuilles de styles de la manière suivante : 1. design global / 2. formulaires / 3. forum … l’important est que tout soit clair pour vous.

Venons en maintenant à la règle @import qui peut se révéler très utile. Classiquement, beaucoup de personnes ont le réflexe de lier toutes les feuilles de style via la balise <link />, ce qui schématiquement, donne ceci :

Ceci ne pose pas de problèmes réels lors d’une évolution de contenu par la création de nouvelles pages HTML, car bien souvent on utilise des gabarits. Il suffit de lier à nouveau les X feuilles de styles depuis la nouvelle page HTML comme le démontre le schéma ci-dessous :

Le problème se pose maintenant lorsque l’on souhaite rajouter une partie de CSS bien disctincte via une nouvelle feuille de style. On doit alors repasser sur toutes les pages HTML pour ajouter une balise <link />, ce qui peut devenir rapidement un enfer si vous avez plusieurs matrices de pages. Alors, dans un souci de création de code fait rapidement, vous allez rajouter une feuille de style supplémentaire, ce qui va donner le schéma ci-dessous :

C’est la que la règle @import peut nous permettre de faire du code CSS propre dans un souci d’évolutivité.

Grâce à cette règle, vous pouvez centraliser l’appel aux feuilles de styles dans un seul fichier CSS (Attention cependant il est recommandé de ne pas utiliser plus de 8 appels dans une feuille de styles d’imports. Les imports supplémentaires risqueraient de ne pas être lus par certains navigateurs). Faites en sorte que toutes vos pages HTML soient liées à une seule feuille de styles qui gérera seule l’appel aux autres CSS. Ainsi sans modifier vos pages HTML, vous pourrez désactiver, supprimer / modifier ou ajouter des feuilles de styles comme bon vous semble, cf. aperçu ci-dessous :

Conclusion

L’utilisation de la règle @import étant limité pour cause de compatibilités avec certains navigateurs, il est obligatoire de lier des feuilles de CSS via la balise <link /> pour chaque type de média.

Ceci étant, pour chaque média vous pouvez centraliser vos feuilles de styles en utilisant sans modération la règle @import, cf. schéma ci-dessous :