Meilleure façon d'inclure les CSS ? Pourquoi utiliser @import ?

Question

En gros, je me demande quel est l'avantage / le but d'utiliser @import pour importer des feuilles de style dans une feuille de style existante plutôt que de simplement ajouter une autre ...

<link rel="stylesheet" type="text/css" href="" />

en tête du document ?

Answer 1

@Nebo Iznad Mišo Grgur

Les méthodes suivantes sont toutes correctes pour utiliser @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

source : https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Answer 2

Il n'y a pas vraiment de différence entre l'ajout d'une feuille de style css dans l'en-tête et l'utilisation de la fonctionnalité d'importation. Utilisation de @import est généralement utilisé pour enchaîner des feuilles de style afin de pouvoir en étendre une facilement. Il pourrait être utilisé pour échanger facilement différentes dispositions de couleurs, par exemple, en conjonction avec certaines définitions css générales. Je dirais que le principal avantage / objectif est l'extensibilité.

Je suis également d'accord avec le commentaire de xbonez, dans la mesure où la portabilité et la maintenabilité sont des avantages supplémentaires.

Answer 3

Citation tirée de http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

L'objectif principal de la méthode @import est d'utiliser plusieurs feuilles de style sur une page, mais un seul lien dans votre < head >. Par exemple, une société peut avoir une feuille de style globale pour chaque page du site, les sous-sections ayant des styles supplémentaires qui ne s'appliquent qu'à cette sous-section. En créant un lien vers la feuille de style de la sous-section et en important les styles globaux en haut de cette feuille de style, vous n'avez pas à maintenir une feuille de style gigantesque avec tous les styles pour le site et chaque sous-section. La seule exigence est que toutes les règles @import doivent précéder le reste de vos règles de style. Et n'oubliez pas que l'héritage peut toujours poser problème.

Answer 4

Je pense que la clé du problème réside dans les deux raisons pour lesquelles vous écrivez plusieurs feuilles de style CSS.

1. Vous écrivez plusieurs feuilles parce que les différentes pages de votre site Web nécessitent des définitions CSS différentes. Ou du moins, elles ne requièrent pas toutes les définitions CSS des autres pages. Vous divisez donc les fichiers CSS afin d'optimiser les feuilles qui sont chargées sur les différentes pages et d'éviter de charger trop de définitions CSS.
2. La deuxième raison qui vient à l'esprit est que votre CSS devient si volumineux qu'il devient difficile à manipuler. Pour faciliter la gestion de ces fichiers CSS volumineux, vous les divisez en plusieurs fichiers CSS.

Pour la première raison, le supplément <link> s'applique, car elle vous permet de charger différents ensembles de fichiers CSS pour différentes pages.

Pour la deuxième raison, le @import apparaît comme la plus pratique car vous obtenez plusieurs fichiers CSS mais les fichiers chargés sont toujours les mêmes.

Du point de vue du temps de chargement, il n'y a pas de différence. Le navigateur doit vérifier et télécharger les fichiers CSS séparés, quelle que soit la manière dont ils sont mis en œuvre.

Answer 5

Ils sont très similaires. Certains diront que @import est plus facile à maintenir. Cependant, chaque @import vous coûtera une nouvelle requête HTTP, de la même manière que l'utilisation de la méthode "link". Ainsi, en termes de vitesse, il n'est pas plus rapide. Et comme l'a dit "duskwuff", il ne se charge pas simultanément, ce qui est un inconvénient.