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

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'un autre, utilisez @import. Faites l'optimisation dans une étape distincte.

Il y a deux variables pour lesquelles 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 seulement ensuite rendre le code plus performant .

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

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

• thématisation: si vous avez des schémas de couleurs ou des thèmes différents pour la même page, ils peuvent partager certains composants, mais pas tous.
• sous-Composants: un exemple artificiel-disons que vous avez une page de restaurant qui inclut un menu. Si le menu est très différent du reste de la page, il sera plus facile à maintenir si elle est 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, si elles sont une personne à charge hiérarchie, vous devriez faire la chose la plus logique à faire.

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

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

Plusieurs requêtes CSS de n'importe quel type - que ce soit via des liens ou via @imports - sont une mauvaise pratique pour les sites Web haute performance. Une fois que vous êtes au point où l'optimisation compte, tout votre CSS devrait circuler à travers un minifier. Cssmin combine les instructions d'importation; comme le souligne @ Brandon, grunt a plusieurs options pour le faire aussi. (Voir aussi cette question).

Une fois que vous êtes à l'étape minifiée, <link> est plus rapide, comme les gens l'ont souligné, donc tout au plus lier à quelques feuilles de style et ne pas @ importer si possible.

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

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

En outre, 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 "éplucher" les lignes @ import d'autres fichiers css. Lorsque vous les incluez en tant que balises

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

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

L'importation charge tous les fichiers CSS supplémentaires un par un (plus lent), et pourrait vous donner un Flash de contenu Non stylé

@Nebo Iznad Mišo Grgur

Voici toutes les façons correctes 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 beaucoup de différence dans l'ajout d'une feuille de style css dans la tête par rapport à l'utilisation de la fonctionnalité d'importation. L'utilisation de @import est généralement utilisée pour enchaîner les feuilles de style afin qu'on puisse facilement les étendre. Il pourrait être utilisé pour échanger facilement différentes mises en page de couleurs, par exemple en conjonction avec certaines définitions CSS générales. Je dirais que le principal avantage / but est l'extensibilité.

Je suis également d'accord avec le commentaire xbonez en ce sens que la portabilité et la maintenabilité sont ajoutées avantage.

Ils sont très similaires. Certains peuvent soutenir que @import est plus maintenable. 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". Dans le contexte de la vitesse c'est pas plus vite. Et comme l'a 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, en anglais et en français. Je vais construire ma page en anglais, en utilisant un principal.CSS. Quand je construis la version française, je vais créer 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 principal.css, puis redéfinir des règles spécifiques pour les parties dont j'ai besoin différentes dans la version française.

Cité à partir de 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 . 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 s'appliquent uniquement à cette sous-section. En établissant un lien vers la feuille de style de sous-section et en important les styles globaux en haut de ce style feuille, 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 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 qui a 32 fichiers css ou plus et vous devez prendre en charge IE9, il n'y a pas le choix. IE9 ignore tout fichier css après le premier 31 et cela inclut et CSS en ligne. Cependant, chaque feuille peut importer 31 autres.

Il y a beaucoup de bonnes raisons d'utiliser @import.

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

Pour ce faire, dans votre base.fichier css vous pourriez avoir ce qui suit:

@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 d'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, alors 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, qui s'en soucie! Essayez d'aller à des systèmes gouvernementaux ou corporatifs 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 aussi un jour désuet et obsolète. Et l'utilisation de CSS de 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 votre compatibilité de site Web multi-navigateurs atteindra maintenant 99,9% de saturation simplement parce que tant de navigateurs plus anciens ne liront pas les feuilles importées. Il vous garantit d'appliquer un ensemble de polices simple de base pour leur html, mais CSS plus avancé est utilisé par les agents plus récents. Cela permet au contenu d'être accessible pour les anciens agents sans compromettre les affichages visuels riches nécessaires dans les nouveaux navigateurs de bureau.

Rappelez-vous, les navigateurs modernes mettent en cache les structures HTML et CSS extrêmement bien après le premier appel à un site web. Plusieurs appels au serveur ne sont pas le goulot d'étranglement qu'il était autrefois.

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 ce n'est pas cohérent entre les pages est le principal moteur du rendu lent aujourd'hui. Vous êtes la page moyenne de Google news est plus de 6 mégaoctets D'ECMAScript juste pour rendre un tout petit peu de texte! LOL

Quelques kilo-octets de CSS mis en cache et de HTML propre cohérent avec des empreintes javascript plus petites seront rendus dans un agent utilisateur à une vitesse fulgurante simplement parce que le navigateur met en cache à la fois un balisage Dom cohérent et CSS, sauf si vous choisissez de manipuler et de changer cela via des astuces de cirque javascript.

Je pense que la clé en cela sont les deux raisons pour lesquelles vous écrivez réellement 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 une autre page. 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 grand que cela devient maladroit à 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 balise <link> 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'instruction @import apparaît comme la plus pratique car vous obtenez plusieurs fichiers CSS mais les fichiers chargés sont toujours de même.

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, peu importe comment ils sont implémentés.

Utilisez @import dans votre CSS si vous utilisez une réinitialisation CSS, comme la réinitialisation CSS v2.0 D'Eric Meyer, donc il fait son travail avant d'appliquer votre CSS, empêchant ainsi les conflits.

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

J'ai connu un "pic élevé" de feuilles de style liées que vous pouvez ajouter. Tout en ajoutant un certain nombre de JavaScript lié n'était pas un problème pour mon fournisseur d'hôte 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 le trouve utile pour avoir une bonne carte mentale, comme Nitram l'a mentionné, tout en codant en dur la conception. Godspeed. Et je pardonne pour 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 traiter CSS(en ce qui concerne la vitesse de la page), voici comment vous devriez traiter Tous votre code CSS:

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

Plus d'informations ici: http://www.giftofspeed.com/optimize-css-delivery/

La raison pour laquelle ce qui précède fonctionne le mieux est parce qu'il crée moins de demandes pour le navigateur à traiter et 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. Ensuite, insérez-le dans une balise <style> dans la tête avant le chargement de la page.

La fonction ci-dessous va supprimer les commentaires et réduire le passé en css. Il est couplé en conjonction 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 allez appeler cette fonction dans la 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. Passer 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 .css car 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>