Y at-il un moyen de trouver CSS inutilisé dans un site Web?

Question

Y at-il un moyen de trouver CSS inutilisé dans un site Web? J'essaye de nettoyer un projet que j'ai juste hérité.

Answer 1

Dust-me Selectors est un plugin Firefox qui trouve des sélecteurs inutilisés.

Answer 2

Je viens de croiser cela et se souvenaient votre question: http://github.com/geuis/helium-css

Answer 3

Il y a tellement qu'on peut dire sur les méthodes les plus pratiques pour les CSS. Je vais essayer de m'en tenir aux points principaux.

Utilisez une réinitialisation CSS. Essayez de supprimer les instructions CSS vraiment générales telles que h1 {} et #container em {}. Il vaut mieux utiliser h1.section-title et #container em.important {}, car si vous choisissez d'utiliser h1 ou em d'une manière différente quelque part dans votre document, vous n'avez pas à vous soucier de surcharger le code existant. Ne soyez pas trop spécifique dans vos sélecteurs CSS si vous n'êtes pas obligé de le faire. Vous avez seulement besoin d'avoir des degrés élevés de spécificité si être dans une section spécifique change la façon dont l'élément va être affiché. Sinon, pour rendre votre code réutilisable, #container .content .block ... peut être réduit à .block ... dans de nombreux cas. Recherchez les points communs dans votre CSS et voyez si vous pouvez créer des classes réutilisables. Si vous avez des blocs similaires class="favorites" et class="popular", transformez-les en class="block block-favorites" et class="block block-popular", et mettez les points communs dans .block. Prenez l'habitude de faire en sorte que les zones de votre CSS aient une largeur automatique (ce qui peut être fait implicitement) pour qu'elles atteignent la largeur de vos conteneurs. Cela rend incroyablement plus facile de déplacer des sections d'une partie étroite de votre site Web vers une grande partie de votre site Web sans avoir à changer de code.

Commenter votre code et le décomposer en sections aide généralement à rendre le code plus lisible.

Vous seriez surpris de voir à quel point votre code est plus propre lorsque vous implémentez des sélecteurs CSS plus puissants. La plupart d'entre eux sont compatibles avec tous les navigateurs (Internet   Explorer 7 et versions ultérieures).
Quelques précieuses ressources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

Réponse de déplacés:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

Chrome 59 a intégré l'affichage de la couverture pour CSS et JavaScript depuis 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Vous pouvez l'activer en ouvrant les outils de développement, puis la commande me nu (Cmd+Shift+P sur Mac ou Ctrl+Shift+P sous Windows et Linux), puis tapez "show coverage".