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

StackOverflow https://stackoverflow.com/questions/3574136

  •  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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top