outil de nettoyage de règle CSS

Question

Nous avons plusieurs fichiers CSS massifs qui vient ne cesse de croître au cours des années à chaque fois que de nouveaux éléments ont été ajoutés à notre système, ainsi que les pages JSP (qui comprennent en outre d'autres pages JSP et ainsi de suite) qui font référence à ces fichiers.

Nous savons que nous avons beaucoup de règles qui ne sont plus utilisés et beaucoup qui sont redondants.

De nouveaux outils ne cessent de sortir. Y at-il un outil qui (en plus évidents comme le validateur CSS Aptana et W3C) qui peut analyser un répertoire et de l'aide dans le nettoyage et l'optimisation des règles CSS?

Answer 1

Il est une tâche délicate ... surtout si votre contenu DOM HTML est généré à la volée de quelque façon.

Le plug-in Dust-Me-Selectors est utile, mais sur une base page par page, beaucoup de sélectionneurs sera utilisé ... mais pas NECs invalide.

Il y a quelques trucs que j'ai utilisé pour aider à nettoyer.

Un par un, insérez un peu de style HORRID que vous serez en mesure de repérer immédiatement pour déterminer si est utilisé un sélecteur. par exemple.

border:6px dashed #ffaacc;
padding:12px;

Tout ce qui rend avec une énorme rose chaud tiretée frontière maintenant ... est un sélecteur « actif ». Si vous pouvez surfer sur la plupart de votre site / application sans le voir, alors il est probable « mort ».

(si votre code CSS est « généré » vous pouvez optimiser ce pour tester avec différentes couleurs à la fois, et l'utilisation du contenu généré par préfixer le « id » du sélecteur)

Une autre option si vous utilisez un système CSS généré ... est d'ajouter une propriété finale à votre sélection que les ensembles dire ... une image de fond avec une URL générée. par exemple.

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Ensuite, vous simplement surfer sur votre site / application pendant un certain temps, puis vérifiez votre journal web pour les demandes d'images HTTP ... pour toutes les URL de l'image générée qui n'a pas été demandé dans le journal ... vous avez probablement trouvé un « mort "sélecteur.

Answer 2

Il y a plugin Dust-Me-Selectors pour Firefox, bien que il regarde à travers une page rendue dans le navigateur, bien sûr, pas à travers un répertoire.

Answer 3

Sélénium vous permet d'automatiser les tests de page et de sélectionner des éléments via des sélecteurs CSS. Si vous accumulez les matchs à travers le site, vous seriez en mesure d'identifier les éléments inégalés.