[Résolu] "Calculateur de CSS" pour nettoyer du code, ça exis

Bonjour,
Je suis confronté au problème suivant:
Je dois améliorer un site web tout en gardant l'esthétique du site, etc.: c'est à dire que mon travail tient plus du restaurateur que du créateur.

Évidemment, le site comporte pas mal de feuilles de styles bien compliquées avec probablement des directives contradictoires, bref, il y a du ménage à faire.

J'ai vu que dans les outils du débuggueur natif de firefox, il y a un onglet qui affiche le style "calculé", c'est à dire tel que le perçoit le navigateur après application de toutes les instructions CSS.

Existe-t-il d'autres outils dans ce genre qui me permettraient de déterminer dans mon code qu'est-ce qui s'applique à quoi et qu'est-ce qui est redondant?

Merci.

PS: mes excuse si cette question a déjà été posée et résolue, mais je n'ai pas du utiliser les bons mots-clés, parce que je n'ai ni trouvé la solution sur g**gle, ni sur le forum...

Bonjour,

Tu as un petit tour d'horizon sur ce sujet (avec les mises en garde qui vont bien )
"Nettoyer son code CSS" dans un moteur de recherche donne des résultat probants

6l20 a écrit :
Bonjour,

Tu as un petit tour d'horizon sur ce sujet (avec les mises en garde qui vont bien )
"Nettoyer son code CSS" dans un moteur de recherche donne des résultat probants

Bon tour d'horizon

flottegauche> si sur un gros site, tu trouves beaucoup de blocs preeeesque identiques enfin similaires (indices : 3 webmasters ou prestas se sont succédés, 0 documentation ) mais avec quelques différences à chaque fois et donc 10 blocs ne différant que de quelques instructions, ne pas hésiter à harmoniser tout ça et changer de méthode : http://oocss.org/ ou BEM. Sur un site de 20 pages avec jamais plus de 3 variantes de bloc, c'est du temps perdu par contre. Documenter pour la personne qui viendra ensuite est bien plus efficace.

Perso j'utilise le changement de couleur pour détecter les similarités ou les exceptions. Exemple : passer un texte ou bordure bleu vers une couleur red ou pink et regarder le site de test à la recherche de ce qui devrait pas être en rouge ou ne plus être en bleu... Parce que si c'est pour discerner #CCC de #DCDCDC, tu vas te fatiguer les noeils pour rien.

Ah et le conseil le plus important en dernier : VERSIONNER. SVN (TortoiseSVN sur Windows) ou Git, peu importe.
Parce que tu VAS faire une erreur ou provoquer une régression et avec cette méthode de travail tu PEUX revenir en arrière, te rappeler de ce que tu avais il y a 15 jours, etc Pas besoin d'être une équipe pour y trouver un intérêt.

Un IDE correct doit proposer ce genre de fonctionnalité. J'utilise PHPStorm et il possède une fonction d'inspection du code qui vérifie le code PHP, HTML, JavaScript, CSS... et remonte automatiquement les erreurs, bugs éventuels, code mal écrit, etc.

Pour la partie CSS il remonte (liste non exhaustive) :

- Les sélecteurs non utilisés
- Les valeurs impossibles
- Les règles non valides ou non standards
- Les règles qui écrasent une règle existante
- Les doublons
- Les propriétés inconnues

Ben merci beaucoup,
Je pense avoir suffisament d'information pour résoudre le problème... et éviter qu'il ne se reproduise.
Je marque donc le sujet comme résolu