Mieux organiser vos fichiers CSS

Ceux qui ont l’habitude de travailler avec les feuilles de styles CSS à haute dose savent comment la situation peut très vite dégénérer. Je me souviens d’un projet pour un grande compagnie d’assurance française où ma feuille de styles dépassait les 1.200 lignes, un vrai cauchemard à maintenir (pardon à ceux qui ont récupéré le projet et ont dû se dépatouiller avec !).

Toujours est-il que l’on parle de plus en plus de structuration voir d’architecture pour les feuilles de style. Le Digital Web Magazine nous propose un article sur le sujet : Architecting CSS. L’auteur y étudie le pour et le contre de trois approches : associer une feuille de styles par gabarit de page, associer une feuille de style pour chacun des éléments majeurs de la page, associer une feuille de style par type de page (formulaire, tableau de données…) sans réellement identifier une solution idéale. Avant cela, Gou avait également rédigé un billet sur le sujet : Structurer ses CSS. Au passage vous remarquerez le nouveau design de son site.

Un commentaire sur “Mieux organiser vos fichiers CSS

  1. Une bonne séparation par medias et par layout/styles/tierces parties devraient déjà constituer une bonne approche. Mais rien ne vaut un véritable bon usage de la semantique (x)html et de l’heritage en CSS pour gagner des octets et de la maintenabilité :)

  2. A titre d’exemple, le moteur de blog DotClear utilise dans son thème par défaut l’approche « deux CSS, un pour le layout (layout.css) et un pour le style (style.css) ». En tant que vieil habitué aux bon vieux tableaux (je sais, Raphaël, je sais), je trouvais ça assez déroutant au début, mais il est vrai que c’est bien plus pratique, quand le client nous fait des sketches sur des polices et des couleurs qui ne lui plaisent qu’à moitié, et qu’il faut changer vite vite.

  3. Non Rickman, les @import ne sont pas pour les chiens mais la question est : à partir de combien de feuilles de styles importées ça devient ingérable, instable ou cela grève les performances. /Fred

  4. Ingérable : c’est une question d’organisation en particulier de règles pour dénommer (class) ou (id) les éléments (HTML tags) Instable : Dans un monde idéal, cette question ne se pose mais les navigateurs ont des failles et parfois cela coince. Performance : quelques règles simples permettent d’avoir des performances correctes.

Laisser un commentaire