Как мне определить и удалить неиспользуемые стили CSS из моей раздутой таблицы стилей?
-
01-10-2019 - |
Вопрос
У меня есть устаревшая таблица стилей, которая теперь полна неиспользуемых стилей.Проблема заключается в том, чтобы отличить необходимое от ненужного.Есть ли какие-либо инструменты, которые помогут в этом?
Решение
Использование CSS является отличным дополнением Firefox. Вы можете просматривать несколько страниц, и он будет работать, какие правила не использовались ни на одном из них - так что это точнее, чем инструмент, который сканирует одну страницу.
Другие советы
Вы можете попробовать Firefox Пыль-мне селекторы добавить.
Установите плагин pagespeed от Google для firebug:
http://code.google.com/speed/page-speed/
Затем в Firebug откройте вкладку "скорость страницы" и, выбрав "производительность", нажмите "проанализировать производительность".
Если у вас есть неиспользуемые правила стиля на данной странице, то наряду с множеством других полезных предложений вы увидите элемент списка с надписью "Удалить неиспользуемый Css".Щелкните, чтобы развернуть его, и на текущей странице появится разбивка неиспользуемых правил css по ресурсам, а также объем памяти, который вы сэкономите, удалив неиспользуемые правила.
Это всего лишь одна крошечная функция pagespeed toolkit, с которой вы обязательно ознакомитесь, если вас вообще интересует производительность вашей страницы на стороне клиента.
Вас также может заинтересовать yslow, аналогичный инструмент для firebug, разработанный компанией yahoo.
Этот инструмент называется, «CSSCSS» удаляет идентифицирует дублированные стили:
Одной из лучших стратегий для меня для поддержания CSS является максимально снижение дупликации. Это не серебряная пуля, но это наверняка помогает.
Для этого вам нужно всегда иметь все правила в вашей голове. Это сложно, CSSCSS легко. Пусть он скажет вам, что избыточно.
Существует действительно удобный плагин для ворчания, называемых ICSS. Он автоматически удалит неиспользуемые CSS на лету. Проверьте эту ссылку для получения дополнительной информации:
Удалите неиспользуемые CSS автоматически с помощью Hrunt
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
потом
uncss http://example.com/ > out.css