18041 sujets

Questions générales et questions de débutants

Organiser sa feuille de style

Bonjour,

Imaginons une feuille de style de plusieurs centaines, voire même de plusieurs milliers de lignes.

Est-il préférable de la conserver en un seul fichier ou peut-on sans problème la scinder en plusieurs documents (parce que la perte de performance serait de toute façon ultra-négligeable, par exemple) ? Et quelles seraient les CSS à insérer dans une feuille à part de la principale ? Je pense à la typo ou à tout ce qui est tourne autour des formulaires. Mais il y en a peut-être d'autres ?

En outre, existe-t-il un article qui traiterait de ce point particulier ? Je parle bien de l'organisation optimale de sa feuille de style et non pas de la syntaxe des CSS elle-même.
Modifié par Interned (05 Sep 2012 - 18:19)
Salut,

J'ai trouvé un passage là-dessus sur Six Revisions :

a écrit :

Using Only One Stylesheet for Everything

This one’s subjective, so bear with me while I give you my perspective.

I am of the belief, as are others, that it is better to split stylesheets into a few different ones for big sites for easier maintenance and for better modularity. Maybe I’ll have one for a CSS reset, one for IE-specific fixes, and so on.

By organizing CSS into disparate stylesheets, I’ll know immediately where to find a style I want to change. You can do this by importing all the stylesheets into a stylesheet like so:

@import url("reset.css");
@import url("ie.css");
@import url("typography.css");
@import url("layout.css");


Let me stress, however, that this is what works for me and many other developers. You may prefer to squeeze them all in one file, and that’s okay; there’s nothing wrong with that. But if you’re having a hard time maintaining a single file, try splitting your CSS up.


Personellement, je suis pas trop pour. Si tu as une stylesheet bien organisée, bien commentée, je ne vois pas l'intérêt de la splitter, à part pour augmenter le nombre de requêtes HTTP.
En développement, ça peut être une bonne idée de séparer les feuilles de style (tout dépends de ce que tu préfères, de ta façon de travailler, des normes de ton équipe/entreprise...).

En production, par contre, il faut toujours limiter le nombre de fichiers à charger par la page. Une feuille CSS est donc bien suffisante.
L'article de Romy est effectivement intéressant, je ne connaissais pas la méthode Daisy. En tous cas, ses propos synthétisent l'objet de ma demande : répartition en fichiers multiples des CSS pour le développement puis rassemblement dans une seule et même feuille pour la production. Je ferai simplement trois remarques.

1) Comment déterminer le type de contenu des fichiers en développement ?

Certaines feuilles demanderaient peut-être à être plus explicites. Si on peut deviner le contenu des reset.css ou forms.css, c'est un peu moins évident pour certaines autres feuilles, telles que skin.css, pages.css, etc. Il faut donc s'accorder au préalable sur le contenu de chaque feuille. Je n'ai pas écouté la conférence, elle en fait peut-être mention.

2) Comment visualiser les CSS ?

A moins d'être un devin ou un génie du webdesign, il est plutôt impossible de coder du CSS sans visualiser matériellement son rendu. Quand on répartit les tâches en plusieurs feuilles, comment ça se passe ? Comment anticiper le comportement de tel élément s'il dépend d'une autre feuille qui n'a pas été encore créée ?

3) Comment éviter la duplication, et autres erreurs, lors de la mise en production ?

Une fois qu'on regroupe toutes les feuilles dans un seul et même fichier, comment fait-on pour éviter les répétitions de code ? Si, dans plusieurs feuilles, la même classe ou le même sélecteur est employé plusieurs fois de suite, comment ça se passe pour rassembler ensuite les propriétés dans le fichier final ?

J'ai découvert aussi cet article qui parle des scripts bash servant à concaténer les fichiers de développement. C'est donc ce qui pourrait bien répondre à ma troisième question ? J'avoue n'avoir aucune idée du fonctionnement de ce script. Existe-t-il des modèles quelque part ?
thierry a écrit :
Et concrètement, qu'est-ce que ça fait, d'augmenter le nombre de requêtes HTTP ?

La page sera plus longue à s'afficher.
BlueScreenJunky
a écrit :
La page sera plus longue à s'afficher.


Oui, mais de combien ? Des microsecondes ? des millisecondes ? Cet argument du nombre de requêtes HTTP revient mécaniquement dès qu'il s'agit d'utiliser plusieurs fichiers CSS au lieu d'un mais sans jamais définir l'ordre de grandeur ? À croire que le résultat serait catastrophique.

Cela expose les personnes qui se rangent à cet argument à bien des difficultés pour gérer leurs styles CSS quand les fichiers en question comportent des milliers de lignes.
Sujet clos
Aller à