La meilleure façon d'inclure CSS? Pourquoi utiliser @import?

Fondamentalement, je me demande quel est l'avantage / but d'utiliser @importpour importer des feuilles de style dans une feuille de style existante par rapport à simplement en ajouter une autre ...

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

à la tête du document?

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

@import url("stylesheetB.css");

le téléchargement de la deuxième feuille de style peut ne pas démarrer tant que la première feuille de style n'a pas été téléchargée. Si, d'autre part, les deux feuilles de style sont référencées dans les <link>éléments de la page HTML principale, les deux peuvent être téléchargées en même temps. Si les deux feuilles de style sont toujours chargées ensemble, il peut également être utile de simplement les combiner en un seul fichier.

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

Je vais jouer l'avocat du diable, parce que je déteste quand les gens sont trop d'accord.

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

Il y a deux variables que vous optimisez à un moment donné - les performances de votre code et les performances du développeur . Dans de nombreux cas, sinon dans la majorité des cas, il est plus important de rendre le développeur plus efficace et de rendre le code plus performant .

Si vous avez une feuille de style qui en dépend , la chose la plus logique à faire est de les placer dans deux fichiers distincts et d'utiliser @import. Cela aura le sens le plus logique pour la prochaine personne qui examinera le code.

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

• Thème: Si vous avez différents schémas de couleurs ou thèmes pour la même page, ils peuvent partager certains, mais pas tous les composants.
• Sous-composants: 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 à 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 <link href>. Cependant, s'il s'agit d'une hiérarchie dépendante, vous devez faire la chose la plus logique à faire.

Python utilise l'importation; C utilise notamment; JavaScript a besoin. CSS a une importation; quand vous en avez besoin, utilisez-le!

2. Une fois que vous arrivez au point où le site doit évoluer, concaténez tout le CSS.

Les demandes CSS multiples de toute nature - que ce soit via des liens ou via @imports - sont de mauvaises pratiques pour les sites Web haute performance. Une fois que vous êtes au point où l'optimisation est importante, tout votre CSS doit passer par un minifieur. Cssmin combine les instructions d'importation; comme le souligne @Brandon, grunt a également plusieurs options pour le faire. ( Voir aussi cette question ).

Une fois que vous êtes au stade de la minification, <link>c'est plus rapide, comme les gens l'ont souligné, alors au plus, liez-vous à quelques feuilles de style et n'en importez pas si possible.

Avant que le site n'atteigne l'échelle de production, il est plus important que le code soit organisé et logique, qu'il va légèrement plus vite.

Il est préférable de NE PAS utiliser @importpour inclure CSS dans une page pour des raisons de vitesse. Consultez cet excellent article pour savoir pourquoi: 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 minify ne peuvent pas "décoller" les lignes @import des autres fichiers css. Lorsque vous les incluez en tant que <balises de lien, vous pouvez utiliser les modules phify / dotnet / java minify existants pour effectuer la minification.

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

en utilisant la méthode du lien, les feuilles de style sont chargées en parallèle (plus rapidement et mieux), et presque tous les navigateurs prennent en charge le lien

L'importation charge tous les fichiers CSS supplémentaires un par un (plus lentement) et pourrait vous donner Flash Of Unstyled Content

@Nebo Iznad Mišo Grgur

Voici toutes les bonnes façons d'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

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

Je suis également d'accord avec le commentaire de xbonez en ce que la portabilité et la maintenabilité sont des avantages supplémentaires.

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". Donc, dans le contexte de la vitesse, ce n'est pas plus rapide. Et comme le dit "duskwuff", il ne se charge pas simultanément, ce qui est une chute.

Un endroit où j'utilise @import est quand je fais deux versions d'une page, anglais et français. Je vais construire ma page en anglais, en utilisant un main.css. Lorsque je créerai la version française, je créerai un lien vers une feuille de style française (main_fr.css). En haut de la feuille de style française, je vais importer le fichier main.css, puis redéfinir des règles spécifiques pour les seules parties dont j'ai besoin dans la version française.

Cité sur http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Le but 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, avec des sous-sections ayant des styles supplémentaires qui ne s'appliquent qu'à cette sous-section. En établissant un lien vers la feuille de style de sous-section et en important les styles globaux en haut de cette feuille de style, vous n'avez pas besoin de conserver une gigantesque feuille de style avec tous les styles du 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 rappelez-vous que l'héritage peut toujours être un problème.

Parfois, vous devez utiliser @import par opposition à inline. Si vous travaillez sur une application complexe contenant au moins 32 fichiers css et que vous devez prendre en charge IE9, vous n'avez pas le choix. IE9 ignore tout fichier css après les 31 premiers et cela inclut et css en ligne. Cependant, chaque feuille peut en importer 31 autres.

Il y a plusieurs BONNES raisons d'utiliser @import.

Une raison puissante pour utiliser @import est de faire une conception multi-navigateur. Les feuilles importées, en général, sont cachées à de nombreux navigateurs plus anciens, ce qui vous permet d'appliquer une mise en forme spécifique pour les très anciens navigateurs comme Netscape 4 ou une série plus ancienne, Internet Explorer 5.2 pour Mac, Opera 6 et plus ancien et IE 3 et 4 pour PC.

Pour ce faire, dans votre fichier base.css, vous pouvez avoir les éléments suivants:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Dans votre feuille personnalisée importée (newerbrowsers.css), appliquez simplement le nouveau style en cascade:

html body {
  font-size:1em;
}

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

Vous pouvez donc, peu importe! Essayez d'accéder à des systèmes gouvernementaux ou d'entreprise plus anciens et vous verrez toujours ces anciens navigateurs utilisés. Mais c'est vraiment juste un bon design, car le navigateur que vous aimez aujourd'hui sera également un jour dépassé et obsolète. Et l'utilisation de CSS d'une manière limitée signifie que vous avez maintenant un groupe encore plus grand et croissant d'agents utilisateurs qui ne fonctionnent pas bien avec votre site.

En utilisant @import, la compatibilité de votre site Web multi-navigateur atteindra désormais une saturation de 99,9% simplement parce que de nombreux navigateurs plus anciens ne liront pas les feuilles importées. Il garantit que vous appliquez un jeu de polices de base simple pour leur code HTML, mais des CSS plus avancés sont utilisés par les nouveaux agents. Cela permet au contenu d'être accessible aux agents plus anciens sans compromettre les affichages visuels riches nécessaires dans les nouveaux navigateurs de bureau.

N'oubliez pas que les navigateurs modernes mettent extrêmement bien en cache les structures HTML et CSS après le premier appel vers un site Web. Les appels multiples au serveur ne sont pas le goulot d'étranglement qu'il était autrefois.

Les mégaoctets et mégaoctets d'API Javascript et JSON téléchargés sur des appareils intelligents et un balisage HTML mal conçu qui n'est pas cohérent entre les pages est le principal moteur du rendu lent aujourd'hui. Votre page d'actualités Google moyenne contient plus de 6 mégaoctets d'ECMAScript juste pour afficher un tout petit peu de texte! LOL

Quelques kilo-octets de CSS mis en cache et de HTML propre et cohérent avec des empreintes javascript plus petites s'afficheront dans un agent utilisateur à une vitesse fulgurante simplement parce que le navigateur met en cache à la fois le balisage DOM et CSS cohérent, à moins que vous ne choisissiez de manipuler et de changer cela via des astuces de cirque javascript.

Je pense que la clé de ceci est les deux raisons pour lesquelles vous écrivez en fait plusieurs feuilles de style CSS.

1. Vous écrivez plusieurs feuilles car les différentes pages de votre site Web nécessitent des définitions CSS différentes. Ou du moins, tous ne nécessitent pas toutes les définitions CSS requises par d'autres pages. Vous divisez donc les fichiers CSS afin d'optimiser les feuilles à charger 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 aussi volumineux qu'il devient difficile à gérer et afin de faciliter la maintenance du grand fichier CSS, vous les divisez en plusieurs fichiers CSS.

Pour la première raison, la <link>balise supplémentaire s'appliquerait car cela vous permet de charger différents ensembles de fichiers CSS pour différentes pages.

Pour la deuxième raison, l' @importinstruction 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 leur implémentation.

Utilisez @import dans votre CSS si vous utilisez un CSS RESET, comme Reset Meyer d'Eric Meyer v2.0, donc il fait son travail avant d'appliquer votre CSS, évitant ainsi les conflits.

Je pense que @import est le plus utile lors de l'écriture de code pour plusieurs appareils. Incluez une instruction conditionnelle pour n'inclure que le style du périphérique en question, puis une seule feuille est chargée. Vous pouvez toujours utiliser la balise de lien pour ajouter des éléments de style courants.

J'ai connu un «pic élevé» de feuilles de style liées que vous pouvez ajouter. Bien que l'ajout d'un nombre illimité de Javascript lié ne soit pas un problème pour mon fournisseur d'hébergement gratuit, après avoir doublé le nombre de feuilles de style externes, j'ai eu un crash / ralentissement. Et le bon exemple de code est:

@import 'stylesheetB.css';

Donc, je trouve utile d'avoir une bonne carte mentale, comme l'a mentionné Nitram, tout en codant en dur la conception. Godspeed. Et je pardonne les erreurs grammaticales anglaises, le cas échéant.

Il n'y a presque aucune raison d'utiliser @import car il charge chaque fichier CSS importé séparément et peut ralentir considérablement votre site. Si vous êtes intéressé par la façon optimale de gérer le CSS (en ce qui concerne la vitesse de la page), voici comment vous devez gérer tout votre code CSS:

• Ouvrez tous vos fichiers CSS et copiez le code de chaque fichier
• Collez tout le code entre une seule balise STYLE dans l'en-tête HTML de votre page
• N'utilisez jamais CSS @import ou des fichiers CSS séparés pour fournir du CSS, sauf si vous avez une grande quantité de code ou si vous en avez besoin.

Des informations plus détaillées ici: http://www.giftofspeed.com/optimize-css-delivery/

La raison pour laquelle ce qui précède fonctionne le mieux est qu'il crée moins de demandes pour le navigateur et qu'il peut immédiatement commencer à rendre le CSS au lieu de télécharger des fichiers séparés.

Cela pourrait aider un développeur PHP. Les fonctions ci-dessous supprimeront les espaces blancs, supprimeront les commentaires et concaténeront tous vos fichiers CSS. Insérez-le ensuite dans une <style>balise dans l'en-tête avant le chargement de la page.

La fonction ci-dessous supprimera les commentaires et réduira les css passés. Il est couplé avec la fonction suivante.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Vous appellerez cette fonction en tête de votre document.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

Incluez la fonction concatenateCSS()dans votre tête de document. Fournissez un tableau avec les noms de vos feuilles de style avec son chemin IE: css/styles.css. Vous n'êtes pas obligé d'ajouter l'extension .csscar elle est ajoutée automatiquement dans la fonction ci-dessus.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>