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

Du point de vue de la vitesse des pages, @import d'un fichier CSS ne devrait presque jamais être utilisé, car il peut empêcher le téléchargement simultané des feuilles de style. Par exemple, si la feuille de style A contient le texte :

@import url("stylesheetB.css");

alors le téléchargement de la deuxième feuille de style peut ne pas commencer avant que la première feuille de style ait été téléchargée. Si, par contre, les deux feuilles de style sont référencées dans le fichier <link> dans la page HTML principale, les deux peuvent être téléchargés en même temps. Si les deux feuilles de style sont toujours chargées ensemble, il peut également être utile de les combiner simplement en un seul fichier.

Il y a parfois des situations où @import est approprié, mais ils sont généralement l'exception, pas la règle.

Answer 2

Je vais me faire l'avocat du diable, car je déteste que les gens soient trop d'accord.

1. Si vous avez besoin d'une feuille de style qui dépend d'une autre, utilisez @import. Effectuez l'optimisation dans une étape séparée.

Il y a deux variables pour lesquelles vous optimisez à tout moment - les performances de votre code, et l'efficacité de votre code. performance du développeur . Dans de nombreux cas, voire dans la majorité des cas, il est plus important de rendre le développeur plus efficace, et seulement ensuite rendre le code plus performant .

Si vous avez une feuille de style qui dépend de sur un autre, la chose la plus logique à faire est de les mettre dans deux fichiers séparés et d'utiliser @import. Cela aura le sens le plus logique pour la prochaine personne qui regardera le code.

(Quand une telle dépendance se produirait-elle ? C'est plutôt rare, à mon avis - généralement une seule feuille de style est suffisante. Cependant, il y a des endroits logiques pour mettre des choses dans différents fichiers CSS :)

• Les thèmes : Si vous avez différents schémas de couleurs ou thèmes pour la même page, ils peuvent partager certains composants, mais pas tous.
• Sous-composantes : Un exemple artificiel : disons que vous avez une page de restaurant qui comprend un menu. Si le menu est très différent du reste de la page, il sera plus facile de le maintenir s'il se trouve dans son propre fichier. la page, il sera plus facile de le maintenir s'il se trouve dans son propre fichier.

Habituellement, les feuilles de style sont indépendantes, il est donc raisonnable de les inclure toutes en utilisant la commande <link href> . Toutefois, s'il s'agit d'une hiérarchie dépendante, vous devez faire ce qui est le plus logique.

Python utilise import ; C utilise include ; JavaScript a require. CSS utilise import ; quand vous en avez besoin, utilisez-le !

2. Une fois que vous avez atteint le point où le site doit être mis à l'échelle, concaténer tous les CSS.

Plusieurs demandes CSS de tout genre - que ce soit par des liens ou par des @imports - sont de mauvaises pratiques pour les sites web à haute performance. Une fois que vous avez atteint le stade où l'optimisation est importante, toutes vos feuilles de style en cascade (CSS) doivent passer par un miniaturiseur. Cssmin combine les déclarations d'importation ; comme @Brandon le souligne, grunt dispose de plusieurs options pour le faire également. ( Voir aussi cette question ).

Une fois que vous êtes à l'étape de l'extraction, <link> est plus rapide, comme les gens l'ont souligné, alors tout au plus créez un lien vers quelques feuilles de style et n'en importez aucune si possible.

Cependant, avant que le site n'atteigne l'échelle de production, il est plus important que le code soit organisé et logique que d'aller un peu plus vite.

Answer 3

Il y a des ERREURS dans les hypothèses sur @import ici qui rendent les arguments contre elle complètement faux.

Tout d'abord, les multiples @imports combinés soit dans un encastrement <style> ou multiples à l'intérieur d'un élément <link> Les étiquettes se téléchargent toutes en parallèle les unes des autres. (Cela est vrai même pour les anciens navigateurs IE). Dans le cas de plusieurs @import à l'intérieur d'un <link> et la feuille de style CSS parente, celles-ci sont également toutes téléchargées en parallèle et utilisent également la même connexion que la feuille de style parente. Elles ne sont simplement pas téléchargées en parallèle avec la feuille de style parente et tout CSS qu'elle pourrait inclure.

Ainsi, les feuilles @import de cette feuille liée ci-dessous se téléchargent toutes en parallèle les unes aux autres. Donc si nous avions cette feuille parent :

<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />

...puis à l'intérieur de la parent.css feuille ci-dessus, nous avons ce qui suit @import enfants, ils devraient tous se télécharger en parallèle et dans la plupart des navigateurs et partager la même connexion TCP :

@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');

Dans le deuxième exemple ci-dessous, ces @import intégrées dans un fichier HTML <style> Les étiquettes doivent également être téléchargées en parallèle, de façon aléatoire. Encore une fois, cela fonctionnait de cette façon dans de nombreux navigateurs anciens, ainsi que dans les plus récents. D'après ce que j'ai lu, ils pourraient avoir des problèmes de commande en utilisant @import comme cela, mais votre CSS doit rarement dépendre de l'ordre de la cascade dans ce type de conception.

<style>
  @import url('child1.css');
  @import url('child2.css');
  @import url('child3.css');
  @import url('child4.css');
</style>

La SEULE fois @import a des problèmes dans les scénarios limités suivants :

1. Vous utilisez principalement les versions 4 à 9 d'IE, qui avaient historiquement des connexions limitées (IE6 n'avait que 2 connexions au serveur, par exemple). Avec ces navigateurs, divers @import et les CSS liés en combinaison ne parviennent pas à se télécharger en parallèle. Cela affecterait <link> Les téléchargements de CSS, aussi, donc ce n'est pas un vrai cas contre @import .
2. Dans le premier cas ci-dessus où une <link> La feuille de style parent contient des feuilles importées, car la feuille parent doit d'abord se connecter et analyser son fichier CSS, ce qui ajoute une connexion supplémentaire au serveur. C'est logique et il faut s'y attendre. Si votre feuille n'a que des importations et pas de CSS, ce que je recommande, sans CS à analyser, @import commence immédiatement et devrait utiliser la même connexion pour télécharger le fichier que le parent.
3. Dans le premier cas ci-dessus où une <link> Si la feuille de style parente contient plusieurs feuilles importées, SI la feuille parente contient également du CSS supplémentaire après les déclarations @imports, alors oui, il y aurait une véritable connexion CSS "bloquante". Dans ce cas, le fichier CSS parent doit être téléchargé en premier, effectuer son analyse CSS et le télécharger en premier, découvrir les @imports, PUIS télécharger les styles @import et les placer avant le CSS dans le fichier avant que le fichier ne soit complet. C'est logique et c'est pourquoi vous ne devez JAMAIS combiner CSS et @import les règles de style dans toute feuille de style CSS . Je ne le fais jamais. Si vous supprimez le CSS dans le fichier parent, les importations appellent immédiatement leurs fichiers sur la connexion des fichiers parents sans délai.
4. Si vous combinez un <link> qui n'a pas de règles importées avec soit une feuille de style liée avec une @import ou une <style> avec @import , dans Internet Explorer UNIQUEMENT, ils ne se téléchargent généralement pas en parallèle. . Les autres navigateurs s'en sortent bien. Comme nous l'avons mentionné, cela peut être lié aux connexions limitées du navigateur IE.

Donc, sur la base de ces règles, dans la plupart des situations, @import fonctionne bien . La principale difficulté réside dans l'ajout de @import dans une feuille contenant beaucoup de CSS simples. Ce type de chose est logique et provoquerait un long retard, car le parent analyse son propre CSS, puis découvre des éléments CSS supplémentaires. @imports .

Gardez à l'esprit que les navigateurs modernes ont environ 6 connexions disponibles, donc @import ne serait pas le goulot d'étranglement, c'est le fait d'avoir trop de fichiers ou trop de GROS fichiers plus du JavaScript non asynchrone qui bloque l'analyse et le rendu dans vos pages Web. D'ailleurs, le téléchargement typique d'une API JavaScript représente aujourd'hui 1,5 mégaoctet !

UPDATE

Il existe également de nombreuses BONNES raisons d'utiliser @import !

L'utilisation de l'option @import est particulièrement utile pour la conception multi-navigateurs. Les feuilles importées, en général, sont cachées de nombreux navigateurs plus anciens, ce qui vous permet d'appliquer un formatage spécifique pour des navigateurs très anciens comme Netscape 4 ou des séries plus anciennes, Internet Explorer 5.2 pour Mac, Opera 6 et plus anciens, et IE 3 et 4 pour PC....then utilisant @import ajouter une feuille de style moderne que ces navigateurs ne peuvent pas voir car de nombreux navigateurs plus anciens ne reconnaissent pas certaines versions de @import .

Par exemple, ajoutez une feuille de style normale vue par tous les navigateurs, anciens et nouveaux :

<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />

...avec ce CSS à l'intérieur...

body {
  font-size:13px;
}

Maintenant, dans votre feuille personnalisée importée (newerbrowsers.css), appliquez simplement le style plus récent pour écrire par-dessus le style ci-dessus pour les navigateurs plus récents uniquement. Les navigateurs les plus récents utilisent des unités "em", les plus anciens "px". Cette version de @import ci-dessous n'est pas vu par un large éventail de navigateurs plus anciens, notamment IE 1-7, MAC IE 5, Netscape 4, et bien d'autres :

<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />

...avec ce @import à l'intérieur, seuls les navigateurs les plus récents le verront. En utilisant ce format @import avec 'all', il sera caché des navigateurs IE1-7, et bien d'autres !

@import 'imported.css' all;

...avec cette CSS dans l'@import...

html body {
  font-size:1em;
}

L'utilisation d'unités "em" est supérieure à celle d'unités "px", car elle permet aux polices et à la conception de s'étirer en fonction des paramètres de l'utilisateur, alors que les anciens navigateurs s'en sortent mieux avec des unités basées sur les pixels (qui sont rigides et ne peuvent être modifiées dans les paramètres de l'utilisateur du navigateur). La feuille importée ne serait pas vue par la plupart des anciens navigateurs.

Vous pouvez le faire, on s'en fiche ! Essayez d'aller sur certains grands systèmes gouvernementaux ou d'entreprise désuets et vous verrez encore ces anciens navigateurs utilisés. Mais ce n'est qu'une question de bonne conception, car le navigateur que vous aimez aujourd'hui sera lui aussi un jour désuet et dépassé. Et l'utilisation limitée de CSS signifie que vous avez maintenant un groupe encore plus grand et croissant d'agents utilisateurs qui ne fonctionnent pas bien avec votre site.

Utilisation de @import La compatibilité de votre site web avec les différents navigateurs atteindra désormais une saturation de 99,9 %, simplement parce que de nombreux navigateurs plus anciens ne liront pas les feuilles importées. Cela vous garantit d'appliquer un jeu de polices simples de base pour leur html, mais des CSS plus avancées sont utilisées par les agents plus récents. Cela permet au contenu d'être accessible aux agents plus âgés sans compromettre les affichages visuels riches nécessaires dans les navigateurs de bureau plus récents. N'oubliez pas que les navigateurs modernes mettent extrêmement bien en mémoire cache les structures HTML et CSS après le premier appel à un site web. Les appels multiples au serveur ne sont plus le goulot d'étranglement qu'ils étaient autrefois.

Des mégaoctets et des mégaoctets d'API Javascript et de JSON téléchargés sur des appareils intelligents, ainsi qu'un balisage HTML mal conçu et non cohérent d'une page à l'autre, sont les principaux facteurs de lenteur du rendu aujourd'hui. La page d'actualité moyenne de Google représente plus de 6 mégaoctets d'ECMAScript juste pour rendre un petit bout de texte ! LOL Quelques kilo-octets de CSS mis en cache et un HTML propre et cohérent avec des empreintes javascript plus petites rendront dans un agent utilisateur à la vitesse de l'éclair, simplement parce que le navigateur met en cache à la fois le balisage DOM cohérent et le CSS, à moins que vous ne choisissiez de manipuler et de changer cela via des tours de cirque javascript.

Answer 4

Il est préférable de NE PAS utiliser @import d'inclure des CSS dans une page pour des raisons de rapidité. Consultez cet excellent article pour savoir pourquoi pas : http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

De plus, il est souvent plus difficile de réduire et de combiner les fichiers css qui sont servis via la balise @import, car les scripts de réduction ne peuvent pas "décoller" les lignes @import des autres fichiers css. Lorsque vous les incluez sous la forme de balises <link, vous pouvez utiliser les modules php/dotnet/java de minification existants pour effectuer la minification.

Donc : utiliser <link /> au lieu de @import .

Answer 5

En utilisant la méthode des liens, les feuilles de style sont chargées en parallèle (plus rapide et meilleur), et presque tous les navigateurs supportent les liens.

import charge tous les fichiers css supplémentaires un par un (plus lent), et pourrait vous donner un Flash de contenu non stylé.