Как определить и устранить неиспользуемые стили CSS из моей раздутой таблицы стилей?
У меня есть устаревшая таблица стилей, которая теперь полна неиспользуемых стилей. Проблема выявления нужное от ненужного. Есть ли инструменты, чтобы помочь с этим?
7 ответов
использование CSS - отличная надстройка Firefox. Вы можете просматривать несколько страниц, и он будет работать, какие правила не были использованы на любом из них - так что это более точно, чем инструмент, который сканирует одну страницу.
установите плагин pagespeed Google для firebug:
http://code.google.com/speed/page-speed/
затем в Firebug откройте вкладку "pagespeed" и, выбрав "performance", нажмите "analyze performance".
Если у вас есть неиспользуемые правила стиля на настоящей странице, то наряду с множеством других полезных предложений вы увидите элемент списка с надписью "удалить неиспользуемый Css". Нажмите, чтобы развернуть его и увидеть разбивку по ресурсам неиспользуемых правил css появится на данной странице вместе с объемом памяти, который вы сохраните, удалив неиспользуемые правила.
Это всего лишь одна крошечная функция инструментария pagespeed, с которой вы обязательно познакомитесь, если вас вообще интересует производительность вашей страницы на стороне клиента.
вас также может заинтересовать yslow, аналогичный инструмент для firebug, разработанный yahoo.
этой под названием," csscss " удаляет идентифицирует дублированные стили:
одна из лучших стратегий для меня для поддержания CSS-уменьшить дублирование, насколько это возможно. Это не серебряная пуля, но это точно. помогает.
для этого вам нужно иметь все наборы правил в голове вообще раз. Это трудно, csscss легко. Пусть он скажет вам, что излишне.
есть очень удобный плагин для Grunt под названием UnCSS. Он автоматически удалит неиспользуемый CSS на лету. Проверить эту ссылку для получения дополнительной информации:
удалить неиспользуемый CSS автоматически с помощью 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']);
};