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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

Затем в Firebug откройте вкладку "pagespeed" и, выбрав "performance", щелкните "Анализ производительности".

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

};

Ответ 7

npm install uncss -g

Тогда

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