Как удалить неиспользуемые стили из CSS?
Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили, которые используются. Как и чем это сделать?
Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 27 авг 2016 в 13:48
235 4 4 серебряных знака 13 13 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Используйте uncss:
А для сборки, нужно скачать и установить node.js, в проекте создать файлы: package.json, gulpfile.js.
Минимальное содержимое package.json:
В командной строке (лучше бы coneEmu консоль) выполнить установку gulp npm install -g gulp npm install —save-dev gulp
Установить gulp-uncss: npm install —save-dev gulp-uncss
Настроить проект в gulpfile.js (посмотреть в описании gulp-uncss + примеров в сети полно).
Минимальный gulpfile.js:
var gulp = require('gulp'); var uncss = require('gulp-uncss'); gulp.task('default', function () < return gulp.src('site.css') // исходник .pipe(uncss(< html: ['index.html', 'posts/**/*.html'] >)) .pipe(gulp.dest('./out')); // результат >); . Это если коротко.
P.S: Если нет времени, то тогда только руками удалять не нужные стили.
Как определить и удалить неиспользуемые стили CSS из моей раздутой таблицы стилей?
У меня есть устаревшая таблица стилей, в которой теперь полно неиспользуемых стилей. Проблема в том, чтобы отличить необходимое от ненужного. Есть ли какие-нибудь инструменты, чтобы помочь с этим?
Cornish 26 Авг 2010 в 14:17
7 ответов
Лучший ответ
Использование CSS — отличная надстройка для Firefox. Вы можете просматривать несколько страниц, и он определит, какие правила не использовались ни на одной из них, поэтому он более точен, чем инструмент, сканирующий одну страницу.
Barney 17 Апр 2014 в 12:50
Вы можете попробовать Dust-Me Selectors в Firefox. добавить.
degenerate 10 Июл 2012 в 00:56
Установите плагин Google Pagespeed для firebug:
Затем в Firebug откройте вкладку «Pagespeed» и, выбрав «производительность», нажмите «анализировать производительность».
Если у вас есть неиспользуемые правила стилей на данной странице, то наряду с множеством других полезных предложений вы увидите элемент списка, помеченный как «Удалить неиспользуемые CSS». Щелкните, чтобы развернуть его и увидеть разбивку по ресурсам неиспользуемых правил css, отображаемых на данной странице, а также размер памяти, который вы сэкономите, удалив неиспользуемые правила.
Это всего лишь одна крошечная функция инструментария Pagespeed, с которой вы обязательно ознакомитесь, если вас вообще интересует производительность вашей страницы на стороне клиента.
Возможно, вас заинтересует yslow, аналогичный инструмент для firebug, разработанный Yahoo.
alegscogs 29 Дек 2010 в 07:04
Этот инструмент под названием «csscss» удаляет идентифицирующие повторяющиеся стили:
Для меня одна из лучших стратегий поддержки CSS — максимально уменьшить дублирование. Это не серебряная пуля, но, безусловно, помогает.
Для этого вам нужно постоянно держать в голове все наборы правил. Это сложно, csscss легко. Пусть он скажет вам, что излишне.
chrisjlee 23 Апр 2013 в 07:39
Для Grunt есть действительно удобный плагин под названием UnCSS. Он автоматически удалит неиспользуемый CSS на лету. Ознакомьтесь с этой ссылкой для получения дополнительной информации:
Deano 5 Мар 2014 в 18:42
Автоматическое удаление неиспользуемого CSS с помощью Grunt
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']); >; Как удалить неиспользуемые стили css?
В chrome нету вкладки «legacy audits». Для firefox расширения в новой версии уже не поддерживаются Те сервисы которые нагуглил — почти все не работают. Все,нашел крутой онлайн сервис https://uncss-online.com/
Отслеживать
69.8k 9 9 золотых знаков 66 66 серебряных знаков 122 122 бронзовых знака
задан 7 июн 2018 в 19:02
223 2 2 серебряных знака 12 12 бронзовых знаков
Сайт не на хостинге,а локально
7 июн 2018 в 19:04
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Это можно проверять только на одной странице, но не факт что удаленные стили не используются на других страницах.
Отслеживать
ответ дан 5 июн 2019 в 7:52
Антон Батрак Антон Батрак
33 6 6 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Три библиотеки для удаления неиспользуемого CSS
В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из этих библиотек предназначены для удаления неиспользуемого CSS. Как автор PurgeCSS и участник PurifyCSS, я хочу воспользоваться моментом и объяснить, какие проблемы могут решить эти библиотеки, и сравнить три самые популярные библиотеки для выполнения этой работы.
Зачем пользоваться библиотекой для удаления ненужного CSS?
Как и c любой библиотекой, всё зависит от вариантов использования, и бывают ситуации, когда их применять не имеет смысла. Наиболее распространенный вариант применения упомянутых нами библиотек — удаление неиспользуемого CSS с помощью CSS-фреймворков.
CSS-фреймворки
Мой опыт работы с Bootstrap в прошлом был не слишком приятным главным образом потому, что я применял CSS-фреймворки к небольшим веб-сайтам. Одна-единственная статическая страница всегда выходила слишком раздутой. Bootstrap предлагал возможность зайти на сайт и выбрать, какими функциями воспользоваться для загрузки обрезанной версии своего CSS-фреймворка. Опыт разработчиков оказался плохим.
Для сравнения, у TailwindCSS есть возможность воспользоваться Purge CSS для автоматического удаления невостребованного CSS. С TailwindCSS вы редко задаетесь вопросом: не переключиться ли на другой фреймворк для обрезки сайта. И вам редко приходится менять настройки, чтобы отключить правила.
Устаревшие веб-сайты
Другой пример — устаревшие сайты, вышедшие из-под контроля. Можно запросить разработческий ресурс, чтобы прибрать беспорядок, который накопился в CSS, но можно и взять инициативу на себя, для начала воспользовавшись этими библиотеками. Они сразу же добавят ценности вашему сайту и помогут идентифицировать неиспользуемый CSS.
Критические страницы
В некоторых компаниях есть разные команды, которые присматривают за разными частями веб-сайта. Одна команда может отвечать за главную страницу приложения, другая — за страницы регистрации и оплаты, а третья — за страницы настроек и администрирования.
В таких ситуациях команды не всегда видят код друг друга. Они могут выбрать общий CSS-фреймворк и не удалять из него никаких CSS, чтобы воспользоваться преимуществами кэширования. Но для критических страниц всё же должно делаться исключение.
Страницы, которые просматриваются один раз и требуют высокой производительности, такие как страницы регистрации и оплаты, с помощью этих библиотек могут удалять неиспользуемый CSS из своего фреймворка и предзагружать полную версию один раз, на последнем шаге регистрации.