Как определить и удалить неиспользуемые стили CSS из моей раздутой таблицы стилей?

Question

У меня есть устаревшая таблица стилей, которая теперь полна неиспользуемых стилей.Проблема заключается в определении необходимого из ненужного.Есть ли какие-нибудь инструменты, чтобы помочь с этим?

Answer 1

Использование CSS - отличная надстройка для Firefox. Вы можете просматривать несколько страниц, и он определит, какие правила не использовались ни на одной из них, - поэтому он более точен, чем инструмент, сканирующий одну страницу.

Answer 2

Вы можете попробовать дополнение Firefox Dust-Me .

Answer 3

Установите плагин скорости страницы Google для firebug:

http://code.google.com/speed/page-speed/

Затем в Firebug откройте вкладку «скорости страниц» и, выбрав «производительность», нажмите «проанализировать производительность».

Если у вас есть неиспользуемые правила стиля на текущей странице, то наряду с множеством других полезных советов вы увидите элемент списка с надписью «Удалить неиспользуемые CSS».Нажмите, чтобы развернуть его и увидеть разбивку по ресурсам неиспользуемых правил CSS, отображаемых на данной странице, а также объем памяти, который вы сэкономите, удалив неиспользуемые правила.

Это всего лишь одна крошечная функция скорости страницинструментарий, с которым вы определенно ознакомитесь, если вас вообще интересует производительность вашей страницы на стороне клиента.

Возможно, вас также заинтересует yslow, аналогичный инструмент для firebug, разработанный yahoo.

Answer 4

Существует действительно удобный плагин для Grunt под названием UnCSS. Он автоматически удалит неиспользуемый CSS на лету. Проверьте эту ссылку для получения дополнительной информации:

Автоматическое удаление неиспользуемого CSS с помощью Grunt

Answer 5

Этот инструмент называется , "csscss" удаляет, идентифицирует повторяющиеся стили:

Одна из лучших стратегий для меня, чтобы поддерживать CSS, это уменьшить максимально возможное дублирование. Это не серебряная пуля, но это точно помогает.

Для этого вам нужно иметь все наборы правил в вашей голове. раз. Это сложно, csscss это легко. Пусть он скажет вам, что является излишним.

Answer 6

npm install uncss -g

Тогда

uncss http://example.com/ > out.css

Answer 7

Удалите неиспользуемый 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']);

};