У меня есть огромный файл CSS и файл HTML. Я хотел бы узнать, какие правила не используются при отображении файла HTML. Есть ли инструменты для этого?
Файл CSS развивался в течение нескольких лет, и, насколько я знаю, никто ничего не удалял из него - люди просто снова и снова писали новые основные правила.
РЕДАКТИРОВАТЬ: было предложено использовать селекторы Dust-Me или инструмент производительности веб-страницы Chrome. Но они оба работают на уровне селекторов, а не на отдельных правилах. У меня есть много случаев, когда правило внутри селектора всегда переопределяется - и это то, от чего я в основном хочу избавиться. Например:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }
Весь текст в моем HTML находится внутри какого-то элемента-обертки, поэтому он никогда не бывает белым. bodyПадение всегда работает, поэтому, конечно, весь bodyселектор не может быть удален. И я бы тоже хотел избавиться от таких бесполезных правил.
РЕДАКТИРОВАТЬ: И еще один случай бесполезного правила: когда оно дублирует существующее, ничего не меняя:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }
Я бы с радостью избавился от второго margin-left... опять мне кажется, что эти инструменты не находят таких вещей.
РЕДАКТИРОВАТЬ: Я ценю все ответы, но, к сожалению, инструменты, которые вы предложили, не сделали никаких полезных предложений. Я проголосовал за ваши ответы, но я буду ждать инструмента, который делает вещи более детально, как указано выше.
Спасибо,
источник
Ответы:
Расширение Dust Me Selecters Firefox
В Инструментах разработчика Chrome вы можете использовать инструмент Производительность веб-страницы, чтобы найти неиспользуемые правила CSS.
источник
.abcдругой запас,<a class="abc">я думаю , что изменился бы его запас при наведении. Теперь это, вероятно, не то, что вы намереваетесь, но это, безусловно, может быть, и вы не можете слепо удалить это дублирующее правило.a.abcв HTML нет определений или <a class="abc"/> нигде нет, он не существует. Во всяком случае, я уже закончил задачу, которая побудила меня задать этот вопрос здесь, и я закончил с применением много эвристики. Я попробовал Chrome Developer Tools, но они мне не сильно помогли.Вы также можете взглянуть на Unused-CSS.com. Этот инструмент изучит ваши страницы и создаст оптимизированные CSS-файлы без неиспользуемых селекторов.
источник
Мне всегда нравилось использование CSS . Это плагин для Firebug, который позволяет вам сканировать страницу и видеть, какие правила CSS не применяются. Он даже будет автоматически сканировать и работать на нескольких страницах.
источник
Проверьте uncss, это модуль узла.
«UnCSS - это инструмент, который удаляет неиспользуемый CSS из ваших таблиц стилей. Он работает с несколькими файлами и поддерживает внедренный Javascript CSS».
https://www.npmjs.com/package/uncss
Редактировать после комментария:
Я думаю, что вы просите две разные вещи:
Удалите неиспользованные правила автоматически, это то, что uncss может сделать для вас. Я также сделал этот инструмент CSS пока, но он не автоматический, как вы спрашиваете: https://www.npmjs.com/package/css-byebye
Оптимизируйте таблицу стилей, где правила могут быть объединены / упрощены.
В этом случае я бы порекомендовал два инструмента, которые делают такие вещи:
Они делают более или менее одинаковые оптимизации, иногда один имеет лучшие результаты, чем другой, а иногда наоборот. Это зависит от вашей таблицы стилей. (вы могли бы бегать один за другим тоже: P)
Я использую их как часть процесса сборки с grunt. Так что на самом деле это не визуальная вещь, как вы просите, но они выполняют ту оптимизацию, которую вы хотите.
Вот что они говорят о CSSO (полная информация здесь: https://en.bem.info/tools/optimizers/csso/ )
Структурные оптимизации:
источник
@John: отличный инструмент, спасибо за ссылку
@liori: Я бы также порекомендовал плагин Firefox Web Developer, который позволяет вам отображать имена / свойства элементов, редактировать CSS в реальном времени (не записывает в ваш файл CSS), чтобы вы могли редактировать и тестировать изменения CSS без ошибок. необходимости сохранять и загружать свой CSS каждые 3 секунды. + загружает больше функций.
Есть также очень хороший инспектор DOM, который подключается к Firebug, который также подключается и отлично подходит для сортировки Javascript.
источник
На самом деле Джон новый браузер Firefox Developer Edition лучше, чем использование Firebug или утилиты Firefox. Попробуйте, и вы не будете разочарованы, я уверен!
https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015
источник