@import vs link
Tout d'abord, je sais que le titre dit qu'il s'agit d'une question en double comme demandé ici , ici et ici . Tout ce que j'ai lu sur ce sujet a plus de deux ans. Beaucoup de choses ont changé au cours de cette période, alors les mêmes pensées sont-elles toujours recommandées?
Voici un exemple, j'utilise @import dans une feuille de style pour apporter mon CSS réinitialisé et quelques autres styles. Dois-je changer cela de @import à <link>? Selon cela article je devrais utiliser le lien. Je demande donc aux autres développeurs quelle est vraiment la meilleure façon à ce jour (25 août 2011)
Pas grand-chose si quelque chose a changé au cours de la dernière année ou deux, et nous avons toujours affaire à beaucoup des mêmes navigateurs à partir de là, vous ne devriez donc pas changer votre pratique.
<link> est préférable dans tous les cas à @import, car ce dernier bloque les téléchargements parallèles, ce qui signifie que le navigateur attendra la fin du téléchargement du fichier importé avant de commencer à télécharger le reste du contenu.
Vous pouvez voir cela en détail ici:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Donc pendant @import peut être pratique, c'est tout ce qu'il offre. Si vous voulez vraiment profiter de temps de chargement rapides, utilisez le nombre minimum de feuilles de style (probablement une dans la plupart des cas), écrivez un bon CSS avec des sélecteurs efficaces (les trucs habituels), réduisez-le et utilisez un <link> tag.
Ça allait être un commentaire mais ça devenait trop long:
Au lieu de @import (Je sais que est très pratique), vous devez combiner les fichiers en un seul lorsque votre site sera mis en ligne. De toute façon, vous ne devriez pas peaufiner ce point, et il existe un certain nombre d'outils pour l'aider à le réduire. Personnellement, en utilisant PHP, j'ai un fichier de configuration où je définis tous les fichiers CSS qui sont écrits dans un fichier CSS séparé (celui que je référencerai dans le <link> tag), puis si la version en cache est ancienne (déterminée manuellement ou automatiquement), elle les combine/les réduit et écrit le contenu dans le fichier "cache", et renvoie une chaîne de requête d'horodatage à ajouter au nom du fichier CSS. forcer un nouveau téléchargement.
Si vous utilisez PHP également, je recommande fortement cssmin , il peut analyser les feuilles de style pour @import et tirez le contenu dans un seul fichier, et gérez tous les aspects de la minification.