Organisation de CSS pour les grands sites

Question

J'ai une question de conception plus générale concernant CSS et sites Web. Je sais que c'est une bonne science informatique de normaliser le code autant que possible et d'éviter la duplication. Donc, il me semblerait logique, du moins en théorie, que l'on fasse la même chose en organisant des feuilles de style pour un site web.

Alors quand j'ai commencé sur mon site web le plus récent, j'ai commencé avec cette même philosophie. Cela a bien fonctionné pour mes premières pages et pendant que je testais seulement dans firefox ...

Cependant, comme mon site a grandi et que j'ai ajouté des pages, des mises en page multiples (et des navigateurs), j'ai trouvé cette philosophie très rapidement. En fin de compte au fil du temps, je suis passé à l'approche suivante:

1. J'ai un fichier de niveau supérieur css très limité pour chaque mise en page maître dans mon site, il contient des classes pour les styles bien connus à travers cette mise en page ainsi que css pour la page maître. Je garde des styles CSS spécifiques pour chaque page.

2. Je garde des styles CSS spécifiques pour les éléments de page intégrable/contrôle

J'ai fini par prendre cette route pour que je puisse avoir confiance que les changements sur une seule page ne romprait pas accidentellement d'autres pages du site résultant dans beaucoup de bogues de régression.

Que font les autres lorsque vous approchez de cela? Est-ce une bonne/mauvaise approche ... Je vois par contre cette approche, certaines pages sont très similaires donc faire un changement significatif signifie changer plus de code CSS, je sens aussi que les pro l'emportent sur ce sur une base quotidienne.

Que pensent les autres développeurs de cette philosophie? Bien? Mal? Juste curieux vraiment ...

Pour moi est l'une de ces situations où j'ai pesé la différence entre mes idéaux (j'essaie de garder un code très serré), et la frustration de changer les exigences sur une page de 20 autres pages parce que je changé une largeur div de quelques pixels (en bouleversant un flottant sur une autre page par exemple).

Merci pour vos commentaires

Answer 1

Comme tout autre type de code, si vous dupliquez votre code CSS dans tous les sens, vous demandez des ennuis. La maintenance va devenir de plus en plus difficile pour vous au fil du temps. La meilleure façon de ne pas avoir de problèmes avec une modification sur une page affectant les autres pages est d'avoir un guide de style qui gère la disposition et la conception de votre interface utilisateur. Si votre guide de style définit les classes HTML et CSS à utiliser pour un élément de conception donné, elles seront toujours affichées de la même manière sur toutes les pages. Si l'élément d'une page spécifique doit être modifié, vous devez modifier le code HTML pour utiliser une classe différente, puis créer une nouvelle feuille de style CSS pour cette classe (et l'ajouter à votre guide de style pour la réutiliser). Le guide de style vous permet également de vous assurer que votre code HTML est uniforme pour tous les développeurs qui travaillent sur le site, ce qui signifie qu'il y a encore moins de chance que les modifications CSS génèrent des problèmes au fur et à mesure du développement. Un autre point que vous devez retenir avec CSS est que chacun de ces fichiers .css que vous créez et référencez sur une page est une requête HTTP. Si chaque page et chaque contrôle possède son propre fichier CSS, vous blessez gravement l'expérience de vos utilisateurs sur le site en ralentissant le temps total de téléchargement des requêtes pour chaque demande de page. Cela rend aussi moins probable que leur navigateur cache le.Parce que le cache a une quantité limitée d'espace, donc si vous continuez à le remplir avec de plus en plus de fichiers .css, ils vont être récupérés du cache plus rapidement. Oui, vous pouvez combiner des fichiers .css par programme dans un gestionnaire afin que votre page ne fasse qu'une requête par page, mais vous avez des frais de serveur supplémentaires et le problème de cache persiste (sauf si vous avez une seule requête pour tous les fichiers .css sur votre site , ce qui va à l'encontre de ce que vous essayez de faire ici de toute façon).