Propriété @import: Utilisation abusive ?

Bonsoir à tous.

Pour une maquette graphique que je suis entrain d'intégrer, j'ai choisis de séparer mes feuilles de style dans plusieurs fichiers pour avoir plus de clarté et éviter de me perdre dans des centaines de lignes de code d'un seul gros fichier.

J'importe mes feuilles CSS avec la propriété @import url(feuille.css); et j'ai au total 7 feuilles différentes qui équivalent à chaque portion du site.

J'aimerais savoir si cette façon de procéder est conseillée ? Y a t-il une alternative pour séparer mes feuilles sans avoir trop de soucis ?

Merci.

Tu peux toujours les "compiler" avec le build script du HTML5 Boilerplate.

Ça t'éviteras d'avoir à mettre en ligne 7 fichiers CSS.


Cela dit, personnellement je préfère utiliser Sass et Compass pour gérer cette partie de la mise en production. Comme ce langage peut tout à fait être utilisé conjointement à du CSS conforme (pas besoins d'intégrer toutes leurs fonctionnalités pour s'en servir hein !), ça te sera peut-être plus simple que le build script quand même "peu flexible".

Merci pour ta réponse.

J'utilise HTML5 Boilerplate, mais qu'est ce que tu appelles "build script" ? Où se trouve-t-il ? Comment ça marche ?

Je vais jeter un œil à Sass et compagnie pour voir en quoi ça peut m'être utile.

Sinon, est-ce vraiment mauvais d'inclure comme je le fais plusieurs feuilles de style ?

Joeldesign a écrit :
Sinon, est-ce vraiment mauvais d'inclure comme je le fais plusieurs feuilles de style ?

Quand j'avais découvert cette méthode je ne jurais que par elle (diffraction jusqu'à 7 fichiers css, pour le fun)... avant de m'apercevoir qu'elle crée autant de requêtes serveur supplémentaires que de fichiers diffractés. Sans compter la chute de performance que le @import occasionne sur les anciens navigateurs comme IE7 (perso ces navigateurs je m'en fiche), ou la non-prise en charge de cette commande par d'autres plus anciens encore (mais ça peut être aussi une manière de filtrer un navigateur).

De manière générale, une fois en ligne, testez votre site sous GTmetrix : très efficace.
Modifié par Olivier C (22 Dec 2011 - 23:44)

Merci, je comprends donc que c'est "mauvais" d'importer plusieurs feuilles de styles.

Je vais voir avec Sass et faire un test dans les deux cas pour voir la vitesse d’accessibilité du site une fois en ligne.

7 requêtes serveurs pour du style CSS c'est excessif; avec, ou sans compter, ie7.

Et ceci surtout que les feuilles de styles sont généralement chargés de manière synchrone et retarderons le chargement entier de la page. Ceci est surtout vrai sous tous les appareils mobiles qui sont beaucoup plus sensibles aux "single break points" causer par des ressources devant en loader d'autres ( dans ton cas, une feuille générale qui load 6 autres feuilles de styles, loadant chacune probablement un nombre d'images, et peut-être un ou des fichiers .htc ).

Quand on utilise la technique des @import, je crois qu'il est absolument nécessaire de compiler tout en un seul fichier lors de la mise en production.

Pour le build script du Boilerplate, c'est tout ce qui se trouve dans le dossier /build

La documentation à ce sujet se trouve ici:

http://html5boilerplate.com/docs/Build-script/
http://html5boilerplate.com/docs/Build-Script-Wizard/

Joeldesign a écrit :
Merci, je comprends donc que c'est "mauvais" d'importer plusieurs feuilles de styles.

Ce qui est encore plus mauvais est d'utiliser le @import pour l'instant. Il vaux mieux attendre encore quelques années, quand les navigateur, et les serveurs, seront plus réactifs. Et dire que Drupal - un CMS dont on vante pourtant la propreté du code - oblige à produire des @import dans sa version 7... placés de manière assez dégeulasse dans le code source d'ailleurs.

Quand je vois ça dans un code source, même si le CMS est en "blanc" (ce qui est rare), je sais que c'est signé Drupal 7.
Modifié par Olivier C (23 Dec 2011 - 09:28)

Merci, je réalise mieux l'impact que ma manip peut avoir sur la navigation du site...

Mais pourquoi le W3C a créé un truc aussi dégueulasse alors ?

Joeldesign a écrit :
Mais pourquoi le W3C a créé un truc aussi dégueulasse alors ?

La règle n'est pas "dégueulasse", c'est la disposition du code dans Drupal qui l'est. Quand à la règle elle même elle est tout a fait prise en charge par les navigateurs récents. Par contre, pour les serveurs (liés aux fameuses requêtes SQL) il faudra attendre encore un peu pour voir monter leur performances...