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

У меня есть огромный CSS-файл и HTML-файл. Я хотел бы узнать, какие правила не используются при отображении HTML-файла. Есть ли инструменты для этого?

Файл CSS развился в течение нескольких лет, и из того, что я знаю, никто никогда не удалял что-либо из него - люди снова и снова писали новые правила переопределения.

EDIT: было предложено использовать селектор пылесоса или инструмент производительности веб-страницы Chrome. Но они оба работают на уровне селекторов, а не отдельных правил. У меня много случаев, когда правило внутри селектора всегда переопределено - и это то, что я в основном хочу избавиться. Например:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

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

EDIT: И еще один случай бесполезного правила: когда он дублирует существующий, ничего не меняя:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

Я бы с радостью избавился от второго margin-left ... опять же мне кажется, что эти инструменты не находят таких вещей.

EDIT: Я ценю все ответы, но, к сожалению, инструменты, которые вы предложили, не приносили никаких полезных предложений. Я поддержал ваши ответы, но я буду ждать инструмента, который сделает все более подробно, как указано выше.

Спасибо,

18 голосов | спросил liori 4 MarpmFri, 04 Mar 2011 18:31:06 +03002011-03-04T18:31:06+03:0006 2011, 18:31:06

6 ответов


8

Dust Me Selecters Расширение Firefox

В Инструментах разработчика Chrome вы можете использовать инструмент Web Page Performance для поиска неиспользуемых правил CSS.

ответил John Conde 4 MarpmFri, 04 Mar 2011 18:36:06 +03002011-03-04T18:36:06+03:0006 2011, 18:36:06
5

Вы также можете взглянуть на Unused-CSS.com . Этот инструмент будет исследовать ваши страницы и создавать оптимизированные файлы CSS без неиспользуемых селекторы

ответил 5 MarpmSat, 05 Mar 2011 13:08:25 +03002011-03-05T13:08:25+03:0001 2011, 13:08:25
4

Мне всегда нравилось Использование CSS . Это плагин для Firebug, и давайте сканируем страницу и посмотрим, какие правила CSS неприменимы. Он будет автоматически сканировать и работать на нескольких страницах.

ответил macca1 5 MaramSat, 05 Mar 2011 02:19:28 +03002011-03-05T02:19:28+03:0002 2011, 02:19:28
2

Проверьте значение uncss, это узел.

«UnCSS - это инструмент, который удаляет неиспользуемый CSS из ваших таблиц стилей. Он работает в нескольких файлах и поддерживает CSS с CSS.»

https://www.npmjs.com/package/uncss

Изменить после комментария:

Я думаю, вы просите две разные вещи:

  1. Удалить неиспользуемые правила автоматически, это то, что может сделать для вас uncss. Я также сделал этот инструмент, CSS byebye, но он не автоматический, как вы спрашиваете: https: //www. npmjs.com/package/css-byebye

  2. Оптимизируйте таблицу стилей, где правила могут быть объединены /упрощены.

В этом случае я бы рекомендовал два инструмента, которые делают такие вещи:

Они делают более или менее одинаковые оптимизации, иногда одни имеют лучшие результаты, чем другие, а иногда и наоборот. Это зависит от вашей таблицы стилей. (вы можете запускать один за другим тоже: P)

Я использую их как часть процесса сборки с хрюканьем. Таким образом, на самом деле это не визуальная вещь, как вы просите, но они делают вид оптимизации, который вы хотите.

Вот что они говорят для CSSO (полная информация здесь: https://en.bem.info/tools/optimizers/csso/)

Структурные оптимизации:

  • Объединение блоков с идентичными селекторами
  • Объединение блоков с одинаковыми свойствами
  • Удаление переопределенных свойств
  • Удаление переопределенных сокращенных свойств
  • Удаление повторяющихся селекторов
  • Частичное слияние блоков
  • Частичное расщепление блоков
  • Удаление пустого набора правил и at-rule
  • Минимизация свойств полей и заполнения.
ответил Amida 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 21:54:52 +0300000000pmTue, 17 Feb 2015 21:54:52 +030015 2015, 21:54:52
1

@John: отличный инструмент, спасибо за ссылку

@liori: Я также очень рекомендую плагин Firefox Web Developer , который позволяет отображать имена /свойства элементов, редактировать css в режиме реального времени (не записывать в ваш файл css), чтобы вы могли редактировать и тестировать изменения css без ущерба для сохранения и загрузки вашего css когда-либо 3 секунды. + загружает больше функций.

Существует также очень хороший инспектор DOM, который подключается к Firebug, который также подключается и отлично подходит для сортировки Javascript.

ответил Digital Essence 4 MarpmFri, 04 Mar 2011 19:50:05 +03002011-03-04T19:50:05+03:0007 2011, 19:50:05
0

На самом деле Джон новый браузер 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

ответил Kevin Morrison 13 Maypm15 2015, 21:27:12

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132