Comment identifier et éliminer les styles CSS inutilisés de ma feuille de style pléthorique?
-
01-10-2019 - |
Question
J'ai une feuille de style héritage qui est maintenant plein de styles inutilisés. Le problème est d'identifier le nécessaire du superflu. Y a-t-il des outils pour aider?
La solution
CSS Utilisation est un Firefox add-in. Vous pouvez parcourir plusieurs pages et établirez quelles règles ont pas été utilisés sur aucun d'entre eux -. Il est plus précis qu'un outil qui scanne une page
Autres conseils
Vous pouvez essayer Firefox Dust-Me Selectors . add-on
Installer le plugin pagespeed de Google pour Firebug:
http://code.google.com/speed/page-speed/
Ensuite, dans Firebug, ouvrez l'onglet 'pagespeed' et, avec la 'performance' sélectionné, cliquez sur 'analyser les performances.
Si vous avez des règles de style non utilisés sur la page actuelle, puis avec beaucoup d'autres suggestions utiles, vous verrez un élément de la liste intitulée « Retirer Css non utilisée ». Cliquez pour agrandir et voir une ventilation par des ressources non utilisées règles CSS figurant sur la présente page, ainsi que la taille de la mémoire que vous économiserez en supprimant les règles inutilisées.
Ceci est juste une petite caractéristique de la boîte à outils pagespeed, que vous vous familiariser avec certainement si vous êtes tous intéressés par les performances de votre page sur le côté client.
Vous pouvez également être intéressé par YSlow, un outil similaire pour Firebug développé par Yahoo.
outil appelé , "csscss" Enlève identifie dupliqué styles:
L'une des meilleures stratégies pour moi de maintenir CSS est de réduire duplication autant que possible. Ce n'est pas une balle d'argent, mais il est certain aide.
Pour ce faire, vous devez avoir tous les jeux de règles dans votre tête à tous fois. C'est difficile, csscss est facile. Laissez-vous dire ce qui est redondant.
Il y a un plugin très pratique pour Grunt appelé UnCSS. Il supprimera automatiquement CSS utilisé à la volée. Consultez ce lien pour plus d'informations:
Supprimer CSS non utilisée automatiquement à l'aide Grunt
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
uncss: {
dist: {
files: [
{ src: 'index.html', dest: 'css/test.css' }
]
}
},
cssmin: {
dist: {
files: [
{ src: 'css/test.css', dest: 'cleancss/testmin.css' }
]
}
}
});
// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default tasks.
grunt.registerTask('default', ['uncss', 'cssmin']);
};
npm install uncss -g
Ensuite
uncss http://example.com/ > out.css