Effacement de la base de code CSS. Outils pour trouver des styles de CSS non utilisés

4 sur 5

De nombreux développeurs sont confrontés au fait qu'après un certain temps de travail sur le projet, dans les fichiers CSS. Les styles apparaissent sur lesquels vous ne pouvez pas dire avec certitude, ils sont utilisés ou non. Cela arrive souvent lorsque vous travaillez dans une équipe et une personne ne fonctionne pas au-dessus des styles. Ou, par exemple, il y avait plusieurs développeurs à vous et vous avez décidé de changer quelque chose ou que le concepteur a conçu une petite refonte. En général, il existe de nombreuses options et le résultat est le navigateur des sélecteurs «morts».

Tout n'aurait rien s'il y a deux ou six mille lignes dans votre fichier, il ne fait aucun doute que tous les sélecteurs sont utilisés, ce qui signifie que vous supprimez des fichiers inutiles et accélérez le chargement de la page. Aujourd'hui, nous allons regarder divers programmes, Plug-ins et services pour nettoyer les fichiers CSS à partir de styles supplémentaires.

Extensions pour Firefox

Prend en compte les styles inclus dans la page à travers @import I.. Il peut analyser à la fois une page séparée et l'ensemble du site. À la fin, vous recevrez une liste de sélecteurs qui ne sont pas utilisés sur le site.

Cette extension pour Firebug, qui vous permet de trouver des sélecteurs non utilisés à la fois sur une page séparée et sur tout le site. Au total, vous recevrez une liste de tous vos sélecteurs parmi lesquels le rouge marqué sera inutilisé.

services Web

Outil en ligne qui vous permet de vérifier lequel des sélecteurs ce fichier Non utilisé sur des pages de site spécifiques. Le moins est qu'il est impossible d'apprécier tout le site de l'ensemble (plus précisément, il est possible, mais long et inconfortable).

Éditeurs de bureau

Une liste des éditeurs de code qui peuvent en quelque sorte être capable de trouver des styles de CSS non utilisés.

Topstyle (Win)

Cela sait également comment trouver des sélecteurs utilisés sur les pages, mais pour lequel il n'y a aucune description dans les fichiers CSS.

Intellij Idea (Win, Mac, Linux)

Editeur de plate-forme croisée conçue principalement pour travailler avec Java.

Conclusion

À mon avis, l'outil le plus efficace de la répertorité - poussière-moi. Une analyse de l'ensemble du site prend moins d'une minute, après quoi vous avez juste besoin de trouver et de supprimer les sélecteurs spécifiés.

Au fait, si l'un de vous utilise l'éditeur ou le service qui ne figure pas dans cette liste, écrivez-vous dans les commentaires, ajoutez. Merci à tous pour votre attention ;-)

Vous venez de rejoindre le projet existant pour remplacer le développeur sortant. Ou peut-être viens de prendre votre ancien projet quelques années plus tard. Vous vous sentez horreur et dégoût lorsque vous regardez le code. Vous ne pouvez faire qu'une chose: effacer tout ce désordre. Avez-vous déjà rencontré quelque chose comme ça? Presque probablement, tôt ou tard, il est confronté à tout.

Vous savez que le nettoyage CSS est une tâche surround. Il est nécessaire de faire beaucoup de temps pour un temps limité - en particulier lorsque les clients / chefs / collègues sont insissiblement conseillés de ne pas toucher ce qui fonctionne. Vous ne savez même pas où commencer.

Linting est notre tout

Dans cette section, je vais passer du fait que vous utilisez SASS. Et non seulement parce que c'est une hypothèse raisonnable dans les conditions actuelles, mais également du fait que l'utilisation inappropriée de SASS est souvent la cause de la contamination de la base de code. Bien que cet article soit utile et ceux qui n'utilisent pas de préprocesseurs, vous devriez donc la prévenir à la fin.

La première chose à faire lorsque j'ai besoin de faire face à la base du code est un peluchon. Linting est le processus d'exécution d'un programme qui recherche des erreurs potentielles et des mauvaises pratiques. Je crois que rendre le code propre Nous faisons le premier pas vers un bon code. Avec l'étymologie, vous pouvez trouver la session dans ce fil dans Stackoverflow.

Sass a écrit sur Ruby Linter, appelé SCSS-Lint. Vous pouvez le configurer vous-même ou télécharger la configuration recommandée par SASS-Guidelins pour commencer maintenant. Également dans Node.js Il y a une peluche d'entraînement, ils ne sont pas compatibles à 100% et peuvent travailler différemment.

Essayez d'exécuter la SCSS-Lint dans votre catalogue avec des fichiers Sass pour identifier les erreurs. Très fortes chances du fait qu'il y aura une tonne d'erreurs. Habituellement, après cela, je tiens à arrêter des expériences sur le nettoyage du code. Sois patient. Vous pouvez maintenant essayer de faire une configuration moins stricte par rapport aux règles qui ne sont pas très importantes pour vous (type de format de tâche de couleur) ou prenez un taureau pour les cornes et utilisez toute la puissance de la peluche.

Erreurs fixes trouvées

Il est temps de résoudre ce qui doit être corrigé. Ceci peut être fait de deux façons. Le premier consiste à vérifier tous les fichiers à son tour et à corriger toutes les erreurs et les lacunes du type de nommage infructueux des variables, des sélecteurs d'imbrication excédentaires et un code mal formaté. La seconde (préférée par moi) est l'utilisation de la recherche et du remplacement. Je ne sais pas comment vous, mais j'adore les expressions régulières et j'aime toujours les utiliser dans votre travail.

Supposons que vous souhaitiez ajouter un zéro manquant dans tous les numéros de points flottants (c'est-à-dire de 0 à 1), ces erreurs de type sont détectées à l'aide de la règle plus précoce du SCSS-Lint. Pour ce faire, utilisez pour rechercher expression régulière \\ s + \\. (\\ d +) (tous les numéros suivant un espace avec un point) et pour remplacer \\ 0. 1 $ (espace, zéro, point et nombre trouvé). Et si vous avez été abusé par la règle de Linter Berferzero Linter, vous pouvez remplacer votre éditeur à l'aide de la recherche / remplacement de toutes les règles de la frontière: Aucun à bord: 0. Aussi facile que la tarte!

J'ai récemment créé le référentiel SCSS-Lint-Regex sur GitHub pour collecter toutes les expressions régulières de la session au même endroit. Assurez-vous de le regarder si vous rencontrez des problèmes de sort dans un grand projet. Et soyez prudent avec la recherche / remplacement, parfois, cela conduit à des effets secondaires inattendus. Après chaque remplacement, exécutez GIT DIFF pour identifier ce qui a changé, il vous assure que vous n'ajoutez pas de bogues à votre code.

Après avoir terminé avec édition de recherche / remplacement, vous ne pourrez pas éviter l'édition manuelle, dans les endroits qui doivent être créés (indents incorrects, non ni excès de chaînes vides, des lacunes manquées, etc.). Cela prend beaucoup de temps, mais cela vous aidera à la prochaine étape, il est donc important de le faire avant de passer à elle.

Note du traducteur

Certaines de ces choses peuvent être faites à l'aide de plugins SassBeautify dans editeurs de texte, par exemple, sublime ou atome.

Révision de la structure du projet

C'est ce qui me dérange vraiment quand je rejoint le projet existant est le manque d'architecture de projet appropriée. Peut-être au tout début du travail et il y avait une sorte de projet, mais au fil du temps, les choses sortent du contrôle et l'intention initiale est perdue. Mais c'est toujours incroyablement important.

Pas tant de sélection importante de la méthodologie de projet, la principale chose est qu'elle aura et ne vous a pas causée à l'inconfort. Il peut être smacs, 7-1 ou ITCS - un choix pour vous. Essayez de restructurer votre code conformément à la méthode sélectionnée. J'utilise habituellement le modèle 7-1, que nous avons développé dans des directives Sass, donc je vous donnerai des conseils pour aider si vous avez choisi ce chemin.

Ensuite, nous nous tournons vers le catalogue des résumés. Toutes les variables, mélanges, fonctions et playcold doivent être ici. Vous êtes libre de les organiser comme vous le souhaitez jusqu'à ce que vous le compromiez avec toutes les variables et toutes les mélangeurs de votre base de code. J'identifie également les variables optionnelles (et les mélanges) à ce stade, car il doit souvent faire face à des variables utilisées une ou deux fois.

Après avoir traité cela, vous devrez prendre une décision laquelle des deux prochaines étapes à faire auparavant. Vous pouvez essayer de vous assurer que tout le contenu du répertoire de base est vraiment des styles de base, pas des styles de composants. Ou vérifiez que dans le répertoire de layouche, il y a tout ce qui concerne la mise en page de la page et que ce code est correctement documenté.

Et enfin, en conclusion, vous devez faire la mise en page du répertoire des composants et constitue généralement une tâche colossale. Je vous conseille de rendre les composants aussi petits que possible et de vous concentrer sur une utilisation à plusieurs reprises. Peu importe si vous augmentez leur nombre - l'essentiel est qu'ils ne dépendent pas du contexte et qui étaient simples pour la lecture, la compréhension et la mise à jour.

À titre d'exemple de la bonne et du petit composant, je peux apporter ce qui suit:

Citation (rembourrage: 10px;) .quote__atribution (taille de la police: 80%;) .Quote\u003e: premier enfant (marge-top: 0;) .Quote\u003e: dernier enfant (marge-bas: 0;)

Essayez de penser des modules. Moins. Plus facile. Indépendant.

Suppression d'un supplément

Je crois que la plus grande différence entre Bad et Good CSS est le nombre de code. CSS est très facile à croître. Quelqu'un peut faire presque chaque mise en page par la méthode d'essai et d'erreur. La capacité de faire quelque chose d'utiliser un minimum de CSS nécessite du travail et la préservation d'une approche minimaliste est un véritable défi.

Cela a été 3 ans, mais ce tweet de Nicholas Galacher Il reste mon problème préféré CSS:

L'observation est une vraie peste CSS. Lors de l'écriture de styles, nous y allons souvent là-bas et en essayant de nouvelles règles - en conséquence, nous laissons également plusieurs déclarations complètement inutiles. Par exemple, débordement: caché, qui a perdu le besoin ou la taille de la police, ne modifiant pas la taille de la police. Laissez-les, nous augmentons la dette technique. Il n'y a rien de bien dans cela.

Lorsque vous écrivez CSS, je pouvais ouvrir les outils de développement dans le navigateur et désactiver alternativement chaque déclaration CSS avant d'envoyer le code fini pour vérifier ce qu'ils affectent. S'ils n'affectent rien, alors je me demande d'abord: "Pourquoi sont-ils ici?". S'ils sont inutiles, je les retire. Avec une technique aussi simple que cela, je vous garantis, je vous garantis uniquement au référentiel seulement un code utile sans déchets.

Effacement de la base de code CSS Ceci est la même technique. Déterminez le composant que vous souhaitez nettoyer, ouvrez les outils de développement et essayez de trouver des déclarations inutiles. Parfois, pour supprimer le code CSS, nous devons déplacer ces styles en bois pour tirer parti des caractéristiques de cascade. Considérez ceci dans le prochain exemple concis:

Parent (/ * ... des choses ici ... * /) .child-a (couleur: rouge;) .child-b (couleur: rouge;)

Un moyen évident d'optimiser est le mouvement de la couleur: déclaration rouge dans le sélecteur parent, après quoi la cascade fera le reste pour nous. Bien sûr, des exemples réels sont généralement plus compliqués, mais cet exemple montre que vous ne devez pas oublier les possibilités de "C" dans l'abréviation CSS..

CSS intelligent et vous ne devriez pas être pire

Il est également très souvent une pénurie de compréhension des valeurs héritées, initiales et courantes. Supposons que vous souhaitiez que les liens soient les mêmes couleurs que le texte principal (ils sont déjà insuffisants). C'est comme ça que ce n'est pas nécessaire de le faire:

A (couleur: noir; / \u200b\u200b* nope * /)

La raison pour laquelle cette solution est infructueuse est évidente: si vous modifiez la couleur du corps, la couleur de liaison sera suspendue avec elle. Si vous pensez à utiliser une variable, cela ne fera que tout ce qui est trop difficile. Et enfin, si le lien sera placé à l'intérieur de l'élément avec son propre style (par exemple, dans une citation), il ne coïncide pas avec elle de couleur.

Le CSS a une manière intégrée pour résoudre ce problème, c'est une valeur hérite:

A (couleur: hériter; / * yay! * /)

De même, lorsque la propriété par défaut est renvoyée, il y aura une mauvaise idée de définir une valeur fixe. Dans CSS, il y a une valeur initiale pour de tels cas. Il n'a généralement pas de différences de la tâche des valeurs fixes, mais il y a des cas où il joue vraiment un rôle, par exemple, lors de la détermination de la direction du texte dans la propriété Text-Aligner. Lors de la réinitialisation du texte-alignement, la valeur gauche peut gâcher le texte sur les langues RTL (dirigé vers la droite), la sortie sera initiale (encore meilleure démarrage, mais cette valeur n'est pas prise en charge dans IE9) /.

Le dernier de la liste, mais pas la valeur la moins importante est couranteColor, de très nombreux développeurs ne savent pas de lui. Si vous vous sentez à propos de leur nombre, ne vous inquiétez pas, demandez-vous simplement de vous demander: «Si vous n'avez pas spécifié la couleur des éléments de limite, pourquoi cohérente-t-il automatiquement avec la couleur de la police de l'élément?". Oui, c'est parce que par défaut, la propriété de bordure est définie sur CurrentColor (Spécification). D'accord, tout est évident du nom.

À mon avis, si vous souhaitez utiliser la couleur de la police de l'élément, vous devez utiliser CurrentColor au lieu d'une valeur fixe ou d'une variable Sass.

Elément (Couleur: Deepkink; Frontière: 1Px Solide; / * La couleur est implicite avec `CourantColor` * /) .Element SVG (remplissage: CourantColor; / * La couleur de remplissage sera identique au texte * /)

Ce sont toutes des capacités de base CSS. Ils font du CSS comme il y a. Et ces opportunités sont utilisées étonnamment rarement. Par conséquent, si vous décidez d'améliorer le code du composant, vous ne devez pas les négliger.

Votre git doit aller bien

Refactoring CSS Code Base est un gros travail en volume. Vous devrez mettre à jour des dizaines de fichiers. Et il est probable que vous cassez quelque chose dans le processus. Soyons honnêtes - tout le monde fait des erreurs et ce serait un cool irréaliste si vous parvenez à terminer un tel travail sans petit rire.

Par conséquent, je vous recommande de constamment que vous travaillez à peine avec le système de contrôle de la version (il est logique de supposer que GIT saillie dans ce rôle). Cela signifie que tous les engagements font une seule chose - de retourner un pas en arrière du code avec un bug sans tourmentation de conflits.

Je sais que beaucoup de gens gitent difficiles et difficiles à percevoir, et des moyens de maîtriser facilement cet article. Croyez-moi: L'histoire de votre git doit être comme un poème si vous ne voulez pas que vous jetez le cerveau.

Conclusion

Ainsi, formulez brièvement les résumés de base de l'article pour ceux qui sont trop paresseux pour lire le texte entier:

Nettoyage du projet CSS / SASS est difficile car il est difficile d'apprécier immédiatement toutes les conséquences du changement ou de la suppression. rangées CSS.. Tout cela est principalement dû au test PAFF CSS. Par conséquent, vous devez être attentif.

Commencez par sort et votre code sera joli. Faites cela parce que cela facilitera votre vie à l'avenir. c'est le même bonne façon Examen de l'état de votre code sans trop de risque (la correction de la saleté de la syntaxe ne doit pas causer de problèmes).

Structez ensuite votre projet conformément à la méthodologie choisie. Peu importe ce que vous choisissez, il est important que vous la suiviez. Si votre projet n'est pas trop de composants, la structuration sera bien démarrage. Trouvez plusieurs fragments d'interface et transférez-les vers des styles dans fichiers séparés. N'hésitez pas à écrire de la documentation, le processus ira plus facilement et vous ressentirez comment aller de l'avant.

Une fois que vous avez effacé le projet et posa tous les composants des étagères, il est temps d'améliorer CSS. Commencez par vérifier que vous pouvez supprimer, car nous écrivons toujours trop de code. Ensuite, essayez de l'optimiser pour qu'il soit moins répété. Ne cessez pas! Votre tâche est de réduire la complexité et de ne pas augmenter. N'oubliez pas de commenter tout ce qui sera improbé à première vue.

Et enfin, vos commits doivent être réguliers et logiques. Combinez des modifications apportées aux petits commits, chacune d'entre elles en fait une chose simple - il vous sera donc plus facile de déployer des modifications si vous faites quelque chose de mal.

Ce dernier, mais pas moins important - n'oubliez pas de célébrer quand tout est fini. Bonne chance!

Bonjour, chère blog lecteurs site web. Ceci est une petite note de la "mémoire elle-même". Il y avait une idée de supprimer des lignes supplémentaires du fichier de style. Pendant sept ans du blog, beaucoup a beaucoup changé, mais les chaînes dans le fichier style.css sont restées (juste au cas où, ou tout simplement oublié de les nettoyer). Maintenant, il me semblait qu'il a commencé à peser trop, et donc l'idée a choisi de la nettoyer.

Il est assez difficile de le faire manuellement et ce n'est pas nécessaire. Il y a des méthodes ce processus automatiser. Certains d'entre eux n'ont pas travaillé pour moi, pour quelque chose qu'il fallait payer et je considérais cela inutile. En conséquence, j'ai profité de la méthode semi-automatique, que je vais écrire dans les rares paragraphes les plus proches. Dirigeant de l'avant indiquera que la taille du fichier CSS a été capable de doubler légèrement que j'étais même quelque peu surprise.

Variantes de recherche inutile pour travailler des styles CSS

Remplacement du fichier de style (son contenu - anciennement supprimé et le nouveau inséré, après quoi il a sauvegardé les modifications via les fichiers) sur les nouvelles modifications visibles (teintées) sur le site n'a pas causé (jusqu'à présent, dans tous les cas, n'a pas révélé ). En général, je suis très heureux et je recommande d'essayer. Rapidement, simple et pratique (ainsi que gratuit).

Bonne chance à toi! À des réunions ambiguës sur le site Web des pages de blog

voir plus de rouleaux que vous pouvez continuer

Vous pouvez être intéressé

Comment augmenter la vitesse de téléchargement du site sur le maximum et l'optimisation du serveur sur le serveur
CSS - ce qu'il est, comme des tables de style cascade se connectent au code HTML à l'aide de style et de lien
Optimisation et compression CSS en page de page - Comment désactiver fichiers externes styles et les combiner dans un pour accélérer le téléchargement Comment configurer une alternance de chaînes de couleur de fond de tables, de listes et d'autres éléments HTML sur le site à l'aide de la pseudoclasse Nth-enfant
Ce qui est nécessaire CSS comment connecter des feuilles de style en cascade à Document HTML et la base de la syntaxe de cette langue
Style de liste (type, image, position) - Règles CSS pour le réglage vue externe Listes B. Code HTML
Comment obtenir un site rapide - optimisation (compression) images et scripts, ainsi qu'une diminution du nombre de demandes HTTP

De l'auteur: Il est assez difficile de discuter des styles monolithiques, car, généralement, les fichiers CSS sont souvent gonflés. Supprimer les styles CSS non utilisés devrait traduire la situation dans la direction contrôlée. Avant de commencer à chercher des styles non utilisés, il convient de noter qu'il existe de nombreuses autres stratégies pour écrire des styles servis. Nos styles peuvent être divisés en parties logiques (mise en page de page, boutons, mesh, widgets, etc.) et utiliser un système de dénomination clair (par exemple, BEM). En règle générale, les développeurs le font avant de rechercher des règles non utilisées. Je pense que c'est vrai, car les styles ont un impact à long terme.

Une autre raison pour laquelle les règles ne sont pas si souvent coupées - juste gênantes pour rechercher et supprimer des styles non utilisés dans tout ce qui est plus qu'un petit projet Web. Si le contenu n'est pas statistique, comment comprendre quelles règles sont utilisées et où?

Outil de développeur chrome

Il s'avère que les outils de développeurs chromés ont déjà une fonction intégrée. Je l'ai expérimenté sur le site, sur lequel, comme je le savais, de nombreux styles peuvent être supprimés. Les sensations ont été mélangées. Le seuil d'entrée est très faible, en particulier pour les développeurs qui ont déjà travaillé avec le panneau de développeurs Chrome. Il n'est pas nécessaire d'installer quoi que ce soit, c'est bien.

Ce que vous devez faire pour vérifier les styles sur le site:

Ouvrir le site

Ouvrez le panneau de développeur

Cliquez sur l'onglet Audits

Sélectionnez l'option de performance de la page Web et exécutez

En termes de résultats, il y aura "supprimer des règles de CSS non utilisées". Si ce n'est pas le cas, cela signifie que vous n'avez pas de styles inutilisés. Toutes nos félicitations! Le résultat est cassé par des styles. La panne n'est pas seulement sur les fichiers, mais sur le style des blocs. Remonté fonctionnalité utileNous n'avons donc besoin que de ces styles que nous avons écrites. Au moins dans cet article.

Est-ce bien?

Je n'ai pas trouvé super façon simple Exporter le résultat de Chrome. Vous pouvez copier directement du bloc, mais vous avez d'abord besoin de déployer. Cela fait un peu de responsabilité un peu gênant. Le démarrage du test dans le navigateur nous repousse encore de travailler avec le code, ce qui peut entraîner le fait que nous oublions de tester le site.

Conclusion: il est utile pour un début, mais pas une solution à long terme.

UNCSS

Pour rechercher des styles non utilisés, vous pouvez utiliser les outils de ligne de commande. UNCSS est un exemple intéressant. Il tire la page à travers des Phantomjs et attrape des styles insérés à travers JS. Je voulais vraiment essayer cet outil, car il a résolu mon problème, car le panneau de développeurs Chrome n'est pas du tout associé à la modification du code. En utilisant UNCSS, vous pouvez enregistrer le résultat directement au fichier, idéal.

Installation

Je ne pouvais pas faire le NPM installer UNCSS sur Ubuntu. Rien de sérieux, je suis arrivé, j'ai oublié quelques dépendances. Commandes à installer des bibliothèques manquantes que j'ai commencé:

sudo apt-get update sudo apt-get Installe-essential chrpath libssl-dev libexft-dev sub sudo apt-get de l'installation libfreetype6 libfreetype6-dev sedo apt-get install libfontconfig1 libfontconfig1-dev

Les UNCS peuvent être intégrées au processus de construction, mais nous allons maintenant baisser. Je pense que l'insérer dans le processus de Bild n'est pas le plus une bonne idée. Addy Osmani a un bon article sur ce sujet. Idéalement, nous devons supprimer les styles inutilisés directement du code et non seulement les filtrer sous le produit final.

Peut-être la meilleure façon de sortir - de le faire. Tout d'abord, passez-la comme une étape de prébilat pour optimiser le code. Deuxièmement, pour lancer une étape Bild pour optimiser les styles que vous ne contrôlez pas.

Utilisation de la ligne de commande

uNCSS http://your-site.foo/\u003e styles inutilisés.css.

Le résultat est décomposé sur les styles du site Your-Site.com et navigateur chrome.Mais stocké dans un seul fichier. Sur mon site, il y a des polices Font-Awesome et toutes les icônes qui ne sont pas utilisées sur page d'accueil, est tombé dans la sortie de la SCEE. Maintenant, peu importe moi. Ils peuvent être masqués si vous exécutez à nouveau la commande et spécifiez Ignoreshets.

Veuillez noter que les feuilles ignorées peuvent prendre une chaîne (URL de style complet à ignorer) ou une expression régulière. Avec une expression régulière, il est plus facile, car il y a moins de caractères et couvre les modifications possibles dans le chemin du fichier.

Ignoreshets /.*font-awesome.min.css/

Un tel message d'erreur apparaît avec le délai d'attente de page. Le délai d'attente peut être agrandi à l'aide de -t N, où N est le nombre de millisecondes (ne pas mettre 360, de sorte qu'il est surpris de savoir pourquoi le code n'a pas attendu 5 minutes).

Conclusion: Les UNCSS sont plus pratiques, aussi plus près de l'endroit où je modifie les styles. Le fichier de sortie est utile lorsque vous excluez les styles inutiles. Je vois que cela a été appliqué en raison de l'option -Inverheshets, qui ignore automatiquement tout ce qui est tombé sous expression régulière. Idéalement pour, par exemple, des sites de WordPress, où divers plugins peuvent serrer leurs styles, mais le développeur n'a besoin que de styles de thèmes de style.CSS, etc.

Quel outil utiliser?

Tout d'abord, j'ai donné l'UNCS et commode ligne de commande. Cependant, alors que j'ai écrit cet article, je les ai essayés sur un autre couple de sites et j'ai reçu des résultats moins prometteurs. En particulier, j'ai plusieurs sites créés il y a quelques années, qui utilisent des cadres, où des commentaires réguliers sont impliqués / *! * ... * /. Ils fonctionnent bien avec les PostCSS, donc avec les UNCS. Je n'ai pas encore plongé dans le problème, mais peut-être plus une nouvelle version Les cartes postales pardonne ces commentaires. Néanmoins, en ce moment, il est devenu une autre barrière, et je ne peux pas utiliser pleinement les UNCS dans mon travail.

Tôt ou tard, chaque front-end (la projection) est confronté à la tâche lorsque vous devez vérifier l'ensemble du site pour la présence de règles de CSS non utilisées. La première chose à l'esprit vient de google et de trouver une sorte de service ou de programme qui rendra tout le travail sale pour nous.

En bref, j'ai blessé et j'ai trouvé de telles solutions:

• service payé Non utilisé-css.com
• Sélecteurs DustMe - Extension Firebug pour Mozilla
• Usage CSS - Extension Firebug pour Mozilla

En ce qui concerne le service payant, vous entrerez sur le site, entrez l'adresse du site pour vérifier et cliquer sur OK. Vous serez écrit que le résultat viendra au courrier, finalement une lettre viendra une journée qui existe déjà un résultat et vous pouvez le télécharger sur le lien (aller et vous sera proposé pour effectuer le paiement pour télécharger le résultat de la numérisation. ). Mais nous ne cherchons pas à des chemins faciles payés, et je veux pouvoir le faire vous-même, nous allons donc laisser un résultat payant à quelqu'un d'autre.

Alors commençons avec quoi logiciel Nous aurons besoin. Tout d'abord, nous aurons besoin Mozilla Firefox.. Après l'installation de Firefox, nous introduisons l'ajout de Firebug dedans.

Dust Me Selectors.

Ajout de la poussière Me Selectors Dans le répertoire officiel des ajouts au navigateur, il n'est pas possible de l'installer en cliquant sur le lien et en cliquant sur la touche Installer maintenant (Naturellement Ouvrir le lien a besoin de Firefox). Le supplément a été installé, redémarré le navigateur et dans le coin inférieur droit, nous aurons une icône de balai rose.

Après la numérisation de l'extension, la page ouvre une fenêtre avec trois onglets de sélecteurs non utilisés (règles inutilisées), Sélecteurs utilisés (règles utilisées) et Spider Log (Spider - Site Numanning). Au bas des deux boutons: enregistrez le document et effacez le résultat de la numérisation.

Maintenant, un peu plus sur Spider Log. Vous devez entrer l'adresse de l'adresse du site ou l'adresse de la carte du site et appuyez sur le bouton Go! En théorie, tout est clair et tout devrait fonctionner, mais peu importe combien je voulais du résultat, le résultat n'a pas fonctionné, plus précisément, il s'est avéré scanner quelques pages et l'ajout de Volla, qui était très triste, En un mot, une sorte d'échec. L'auteur affirme que le complément est nécessaire Version Mozilla 1,5 et plus (c'est aussi un divorce [Hihi] que j'ai installé, mais tout fonctionne, mais toujours pas aussi nécessaire). En principe, c'est le seul moins et le plus important, car il était nécessaire de vérifier l'ensemble du site, mais il a été vérifié assez longtemps (il a tué le sol dans cette corbeille). Le plus positif est que si vous entrez le nom du site, l'addition construira une carte du site, et elle nous sera utile pour l'addition suivante. Utilisation CSS.Alors assurez-vous de sauvegarder la carte du site.

En principe, si vous devez vérifier une page, cette expansion vous aidera parfaitement, je noterai également un tel minus que, à toute ouverture du complément, la page est numérisée, en bref, la gestion de l'expansion n'est pas très confortable. , alors j'ai marqué dessus.

Utilisation CSS.

Supplément Usage CSS dans le répertoire officiel se trouve sur le lien. Jusqu'à récemment, l'expansion a fonctionné à installer version firefox. 3.6.25, et au moment de la rédaction de l'article, l'auteur, comme si vous réveillez ou réveil et mis à jour l'addition, vous pouvez donc mettre sur dernière version Mozill'a Une fois que vous avez défini cette addition et redémarrez le navigateur, allez audacieusement sur le site que vous souhaitez vérifier et dès que la page est chargée, appuyez audacieusement sur la touche F12 (la fenêtre Firebug s'ouvre) et vous verrez l'onglet Utilisation CSS:

Pour vérifier la page pour des règles inutilisées, vous devez appuyer sur le bouton de numérisation (la numérisation prend les secondes 30 et même moins). À première vue, il semble que cette extension ne scanne qu'une seule page, que faire avec le reste des pages que vous demandez. Et rappelez-vous que nous avons enregistré la carte du site en utilisant l'extension de la poussière Me Selectors, cependant, s'il existe une carte de site HTML sur le site vérifié, s'il n'est pas préférable de l'utiliser, vous n'avez pas de nouvelle page de site et insérez la Carte de site avec la poussière Me Selectors Extension (s'il n'y a aucune possibilité de créer nouvelle page puis à ce sujet ci-dessous).

Maintenant, je vais décrire une séquence d'actions pour la numérisation:

1. ouvrir la carte du site HTML
2. cliquez sur F12 - Firebug Ouvre
3. aller à l'onglet USAGE CSS
4. appuyez sur le bouton AutoScan
5. nous mettons à jour la page (cliquez sur F5)

En conséquence, ils ont reçu la première page numérisée. Vous pouvez enregistrer le résultat et continuer à continuer à analyser. Je vous suggère de continuer. Continuez à numériser facilement, nous n'avons rien à choisir (puisque nous avons choisi la page Autocaning), mais vous pouvez simplement accéder au premier lien dans la carte du site (vous n'avez pas besoin d'ouvrir le lien dans une nouvelle fenêtre, il est nécessaire que tout Les actions se produisent dans une fenêtre).

Au tout début de la page numérisée, la notation suivante est indiquée:

• Ligne - Règles de rangée
• Sélecteur CSS - Règle CSS
• Vu - Règle CSS d'occasion (vert clair)
• Vu avant - les règles CSS utilisées précédemment (vert foncé)
• Règles CSS non utilisées - non utilisées (rouge)
• : Hover - Règles CSS pour les articles reçus de la mise au point (gris)
• (2 analyses) - Affiche le nombre de numérisation (si vous avez numérisé la page actuelle, il y aura un numéro 1)
• exporter CSS nettoyé - Enregistrer le résultat de la balayage

Vous pouvez continuer à continuer à analyser, la vérité devra retourner sur la carte du site (premier moins). Il n'est pas nécessaire de se dépêcher de se dépêcher, il est important que la page se charge complètement, le fonctionnement de la moto que vous verrez (c'est-à-dire que le résultat de la balayage sera affiché dans la fenêtre Firebug).

L'extension vérifie tous les styles de plug-in. Si les règles CSS sur le site sont nombreuses, vous devrez faire défiler la roue pour voir le résultat de la numérisation:

Ce résultat est affiché après chaque fichier de style s'il y en a plus d'un.

Lorsque toutes les pages sont numérisées, cliquez sur le lien CSS nettoyé à l'exportation, le résultat s'ouvrira dans un nouvel onglet, sélectionnera tout et enregistrera dans un fichier avec éruption cutanée. CSS, étiquette inutilisée sera spécifiée avant chaque règle inutilisée:

Le deuxième minus d'une telle méthode de numérisation est que cette extension ne scanne pas le site pop-up (modal) du site, il est vraiment désolé, vous devez donc copier les règles CSS pour les fenêtres modales.

Malgré deux minus, à mon avis, c'est le plus cool méthode de vérification des styles Fichier pour les règles CSS non utiliséesqui existe aujourd'hui.

Je l'ai utilisé pour optimiser deux fichiers de style avec un poids courant dans 360 Ko - 18000 lignes, j'ai été choqué quand il l'a vu. Après toutes les fraudes, avec cette méthode, un fichier de fichiers était un fichier à 90 ko et 1 100 lignes, le résultat était toujours satisfait, et moi aussi. Certes, la décision était à la recherche d'une longue période, la prochaine fois que tout sera beaucoup plus rapide, ce qui est très heureux.

J'ai presque oublié. Que faire si vous créez une page avec une carte du site n'est pas possible? Dans ce cas, vous devrez insérer chaque lien de la carte du site avec des poignées à chaque lien et tout fonctionnera parfaitement.

Et au fait, si vous avez choisi WordPress Management Management System, vous pouvez savoir comment créer une carte de site pour cela.

Je note également que le service payé envoie le résultat de la numérisation dans les 24 heures et si sur votre site (ressource) 10 ou 20 pages, votre chèque prendra beaucoup moins de temps que vous ne dépensez pour attendre le résultat. Mais, s'il y a un grand nombre de pages sur le site et que différents modèles sont utilisés pour eux, bien sûr, il est conseillé de payer 2 $ 25 pour un tel service.

J'espère que vous serez utile une telle méthode pour vérifier votre fichier de style.