Comment puis-je trouver des règles CSS inutilisées / non appliquées dans une feuille de style?

18

J'ai un énorme fichier CSS et un fichier HTML. Je voudrais savoir quelles règles ne sont pas utilisées lors de l'affichage d'un fichier HTML. Existe-t-il des outils pour cela?

Le fichier CSS a évolué au cours des dernières années et d'après ce que je sais, personne n'y a jamais rien supprimé - les gens ont simplement écrit de nouvelles règles primordiales encore et encore.

EDIT: Il a été suggéré d'utiliser les sélecteurs Dust-Me ou l'outil de performances des pages Web de Chrome. Mais ils fonctionnent tous les deux au niveau des sélecteurs et non des règles individuelles. J'ai beaucoup de cas où une règle à l'intérieur d'un sélecteur est toujours remplacée - et c'est ce dont je veux surtout me débarrasser. Par exemple:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

Tout le texte de mon HTML est à l'intérieur d'un élément wrapper, il n'est donc jamais blanc. bodyLe rembourrage de fonctionne toujours, donc bien sûr tout le bodysélecteur ne peut pas être supprimé. Et je voudrais aussi me débarrasser de ces règles inutiles.

EDIT: Et un autre cas de règle inutile: quand il duplique un existant sans rien changer:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

Je me débarrasserais avec plaisir de la seconde margin-left... encore une fois, il me semble que ces outils ne trouvent pas de telles choses.

EDIT: J'apprécie toutes les réponses, mais malheureusement, les outils que vous avez suggérés n'ont fait aucune suggestion utile. J'ai voté pour vos réponses, mais j'attendrai un outil qui fasse les choses de manière plus granulaire, comme spécifié ci-dessus.

Merci,

css optimization

— liori
source

Vous pourriez saisir le manque de tout outil approprié comme une opportunité: puisque vous comprenez ce dont vous avez besoin, vous pouvez être la meilleure personne pour créer un tel outil. Vous pouvez inspecter le code des outils existants pour les idées et les techniques, puis créer quelque chose qui fonctionne au niveau de la règle plutôt que du sélecteur. Votre chance à la gloire et à la fortune! ... enfin, peut-être juste la gloire;)

— iconoclaste

@Brandon: cette question vient de frapper le point «question notable»… alors vous avez peut-être raison :-)

— liori

8

Extension Firefox de Dust Me Selecters

Dans les outils de développement de Chrome, vous pouvez utiliser l'outil de performances des pages Web pour trouver des règles CSS inutilisées.

— John Conde
source

Super, je vais le vérifier tout de suite!

— liori

Ces outils ne peuvent supprimer que des sélecteurs inutiles. J'ai clarifié ma question.

— liori

2

@liori: Je ne pense pas que ce soit possible de manière fiable. Dans votre exemple de marge, la deuxième règle de marge peut sembler superflue, mais elle a une spécificité plus élevée et pourrait remplacer une règle ultérieure. Par exemple, si une classe .abca une marge différente, <a class="abc">changerait sa marge au survol je pense. Maintenant, ce n'est probablement pas ce que vous envisagez, mais cela pourrait certainement l'être, et vous ne pouvez pas supprimer aveuglément cette règle en double.

— DisgruntledGoat

@DisgruntledGoat: Je pense au cas d'un monde fermé: s'il n'est pas précisé, il n'existe pas. Donc, s'il n'y a pas de définitions a.abcou s'il n'y a pas de <a class="abc"/> nulle part dans le HTML, cela n'existe pas. Quoi qu'il en soit, j'ai déjà terminé la tâche qui m'a incité à poser cette question ici, et j'ai terminé avec l'application de beaucoup d'heuristiques. J'ai essayé les outils de développement de Chrome, mais ils ne m'ont pas beaucoup aidé.

— liori

5

Vous pouvez également jeter un œil à Unused-CSS.com Cet outil explorera vos pages et construira des fichiers CSS optimisés sans les sélecteurs inutilisés

4

J'ai toujours aimé l' utilisation de CSS . C'est un plugin pour Firebug et vous permet de parcourir la page et de voir quelles règles CSS ne sont pas appliquées. Il analysera même automatiquement et fonctionnera sur plusieurs pages.

— macca1
source

2

Vérifiez uncss, c'est un module de noeud.

"UnCSS est un outil qui supprime le CSS inutilisé de vos feuilles de style. Il fonctionne sur plusieurs fichiers et prend en charge le CSS injecté par Javascript."

https://www.npmjs.com/package/uncss

Modifier après commentaire:

Je pense que vous demandez deux choses différentes:

Supprimez automatiquement les règles inutilisées, c'est ce que uncss peut faire pour vous. J'ai également créé cet outil, CSS byebye, mais ce n'est pas automatique comme vous le demandez: https://www.npmjs.com/package/css-byebye
Optimisez la feuille de style où les règles peuvent être fusionnées / simplifiées.

Dans ce cas, je recommanderais deux outils qui font ce genre de choses:

CSSO: http://css.github.io/csso/
clean-css: https://www.npmjs.com/package/clean-css

Ils font plus ou moins les mêmes optimisations, parfois l'un a de meilleurs résultats que l'autre, et parfois c'est le contraire. Cela dépend de votre feuille de style. (vous pouvez aussi courir l'un après l'autre: P)

Je les utilise dans le cadre d'un processus de construction avec grognement. Ce n'est donc pas vraiment une chose visuelle comme vous le demandez, mais ils font le genre d'optimisations que vous souhaitez.

Voici ce qu'ils disent pour CSSO (informations complètes ici: https://en.bem.info/tools/optimizers/csso/ )

Optimisations structurelles:

Fusion de blocs avec des sélecteurs identiques
Fusion de blocs aux propriétés identiques
Suppression des propriétés remplacées
Suppression des propriétés raccourcies remplacées
Suppression des sélecteurs répétitifs
Fusion partielle de blocs
Fractionnement partiel des blocs
Suppression d'un ensemble de règles vide et d'une règle
Minification des propriétés de marge et de rembourrage

— Kev
source

A en juger par la page principale, cela fonctionne au niveau du sélecteur. Peut-il réellement supprimer des règles dans les deux exemples de cas que j'ai mentionnés dans la question?

— liori

J'ai modifié ma réponse. J'ai testé votre premier exemple avec l'interface Web CSSO: result: body {color: #fff; padding: 10em} h1, p, ul {color: # 000}

— Kev

1

@John: excellent outil, merci pour le lien

@liori: Je recommande également fortement le plugin Firefox Web Developer qui vous permet d'afficher les noms / propriétés des éléments, d'éditer le css en temps réel (n'écrit pas dans votre fichier css) afin que vous puissiez éditer et tester les changements css sans faff d'avoir à enregistrer et télécharger votre CSS tous les 3 secondes. + charge plus de fonctionnalités.

Il y a aussi un très bon inspecteur DOM qui se branche sur Firebug qui se branche également et est idéal pour trier Javascript.

— Essence numérique
source

0

En fait, John, le nouveau navigateur Firefox Developer Edition est meilleur que d'utiliser Firebug ou l'utilitaire Firefox. Essayez-le et vous ne serez pas déçu, j'en suis sûr!

https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

— Kevin Morrison
source