CSS @import Best Practices

Question

Je sollicite des avis sur la meilleure façon de gérer @ import ou de les éviter tous ensemble.

Travailler avec DNN Je constate que, lors de l'habillage, le CSS pour tous les différents éléments de remplacement pour les modules et autres peut être très salissant. Il peut être ardu de travailler avec tous les CSS dans un seul fichier et je me demande s'il est préférable de les séparer et de les importer en haut de la page skin.css. Il y a aussi la question de l'efficience et si c'est un bon compromis.

Je ne suis pas un pro du CSS mais je pense que je peux connaître la réponse à cette question mais je le demanderai quand même. Est-il possible de référencer divers fichiers CSS de la même manière que, disons, des fichiers .cs? skin.Events.someElement? Ce ne serait pas gentil? ;-)

Merci.

Answer 1

De l'expérience pure:

Pendant que vous travailler peut tout garder séparés (reset.css, forms.css, main.css, etc.) si vous trouvez qu'il est difficile de travailler avec un seul fichier - Je ne t faire même que ..

Lors de la mise en production - garder tout dans un fichier - pas d'importations - 1 demande de serveur - minimiser vos css. Exception est un IE.css supplémentaire si vous voulez garder votre main.css hack libre/réussite validation (Je ne le fais pas aussi, car pas un seul de mes clients se souciait de la validation - les gens veulent que ça fonctionne, les badges ne sont pas une tendance :) - donc j'utilise juste des hacks à travers mon main.css (#, _, etc.))

Answer 2

Il vaut mieux éviter @import. Selon Steve Souders, combiner, @import et link ou incorporer @import dans d'autres feuilles de style entraînera des téléchargements séquentiels plutôt que parallèles.

Il existe également d'autres problèmes.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Yahoo recommande également contre @import, notant que

Dans IE @import se comporte comme utilisant au bas de la page , il est donc préférable de ne pas l'utiliser.

http://developer.yahoo.com/performance/rules.html#csslink

J'utilise habituellement un stylesheet et utiliser link pour la saisir. Pour les sites exceptionnellement volumineux, j'utilise une feuille de style principale, puis des feuilles plus petites pour les sections qui nécessitent un style supplémentaire, en ajoutant ces feuilles de style à différentes pages si nécessaire.