Des outils pour optimiser un gros fichier CSS ?

Salut à tous,

Je voulais savoir si il existait des outils pratiques permettant de modifier un fichier css pour le rendre plus léger en identifiant des erreurs, en utilisant l'héritage, la définition multiple etc...

La principale raison à cela c'est que je viens d'intégrer un forum fluxBB sur mon site, je souhaitais conserver l'interface graphique de mon site, menu etc en plus du menu alors j'ai du intégrer le css du forum dans celui de mon site... le css ainsi obtenu fait 41kb

Vue que j'ai de nombreux doublon la dedans : redéfinir la couleur des liens des éléments du forum de la même manière que des liens lambda sur le corps de ma page par exemple etc. ca me prend un temps fout d'identifier les endroits où je pourrais supprimer ou faire hérité de tel ou tel élément... (je m'arrache les cheveux)

Au vue du fait que je ne suis surement pas le seul à avoir rencontré ce problème je me demandais si il existait un outil ?

Par outil, je ne veux pas parler de compresseur comme ce site par exemple ou une expression régulière en python sous Komodo pourrait déjà le faire : http://www.cssoptimiser.com/,

Je recherche réellement un outil qui parse la syntaxe css et qui identifierait des optimisations dans la syntaxe même... qui ne se contenterait donc pas d'éliminer les espaces que le fichier contient mais qui modifierai le code css en l'optimisant et en évitant les redifinitions multiple de background, color, hover etc.

Merci d'avance !

haugure a écrit :

La principale raison à cela c'est que je viens d'intégrer un forum fluxBB sur mon site, je souhaitais conserver l'interface graphique de mon site, menu etc en plus du forum alors j'ai du intégrer le css du forum dans celui de mon site... le css ainsi obtenu fait 41kb

Après relecture c'est plus claire comme cela
Modifié par haugure (22 Feb 2011 - 10:23)

Pour nettoyer tes lignes de codes CSS et éviter les redondances des tags ou des attributs, tout en gagnant du poids, je ne saurais trop te conseiller d'utiliser Clean CSS qui offre plusieurs paramètres d'optimisation.

Dans un autre registre, CssHelper peut également s'atteler à cette tâche mais en profondeur. Contrairement à Clean CSS, ce logiciel à télécharger ici ne se contente pas de supprimer les caractères inutiles (espaces, saut de lignes, …) et de compresser l’ensemble. Il va plus loin en testant l’utilisation effective des sélecteurs CSS dans les pages.

Il te suffit pour cela de lui indiquer le répertoire de base de votre projet (par exemple le htdocs de votre copie locale du serveur web), une feuille de style et les types de fichiers pris en compte (*.PHP, *.HTML …). CSSCleaner va t'indiquer quelles sont les classes CSS non utilisées et tu pourras ainsi soit les supprimer, soit (ce que je recommande) les commenter pendant un certain temps avant de les supprimer définitivement.

Enfin, si tu veux creuser la question, je te conseillerais de lire cet article.

Salut Hopper et merci pour cette mine d'informations fortement utile Je vais m'empresser de découvrir ces outils

Dust-Me selectors est une extension Firefox qui te permet, en parcourant ton site, d'identifier les sélecteurs non utilisés : http://www.sitepoint.com/dustmeselectors/

C'est sûr que si tu accoles deux bases de code, en modifiant partiellement la deuxième, ça peut donner des choses assez lourdes. Dust-Me Selectors et d'autres outils peuvent aider, mais ça risque d'être laborieux de trouver et supprimer les styles inutiles, avec en plus le risque de supprimer des styles utiles uniquement dans des cas particuliers.

J'aurais gardé les styles séparés: feuille de styles globale pour tous le site, et feuille de styles pour le forum qui s'ajoute (le forum a alors 2 fichiers CSS). Ça évite de pénaliser les visiteurs qui ne visitent pas le forum (à voir si c'est pertinent pour ce site là).

Bien entendu, sur le site en production tu vas pouvoir minifier les fichiers CSS (avec YUI Compressor par exemple), et activer la compression gzip si ça n'est pas déjà fait.

@Libratoi merci je check ca dès demain là je viens de m'envoyer la programmation de mon "memcache" en php je suis un peu trop fatigué !!!!

@fvsch Oui en effet j'ai hésité comme tu le conseilles mais pourquoi conserver une feuille CSS avec des imperfections ? J'ai préféré fusionner les deux feuilles... ca rajoute certes du travail en fait, mais ce qui m'ennuie le plus c'est de voir ces 41kb de css à l'arrivé pour un truc qui pourrait faire que 4kb grand max... tout compris...

Gzip est pas activé sinon, je pourrais mais je préfère gérer cela apres en fonction du client, comme j'ai l'habitude de le faire ... je me trompe peut etre ? Tu ne regardes pas par habitude la config client avant de compresser les flux (XML ou autre) ? par habitude je préfère vérifier certaine machine sont weak... comme les mobiles ou autres pentium 2...

haugure a écrit :
Gzip est pas activé sinon, je pourrais mais je préfère gérer cela apres en fonction du client, comme j'ai l'habitude de le faire ... je me trompe peut etre ? Tu ne regardes pas par habitude la config client avant de compresser les flux (XML ou autre) ? par habitude je préfère vérifier certaine machine sont weak... comme les mobiles ou autres pentium 2...

La compression Gzip ne coute rien du tout en temps processeur au client. C'est du code C/C++ compilé qui s'en charge, ça existe depuis des lustres, ça va vite.
Côté serveur, pour des petits et moyens sites (hébergé sur un serveur dédié max plutôt que sur un réseau complet de serveurs...), tu actives le module d'Apache qui va bien, tu prends deux minutes pour le configurer, et voilà.