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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автоматическое удаление неиспользуемого 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']);

};

npm install uncss -g

потом

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