Фильтр специфичности CSS
Это долгий путь, но есть ли доступный инструмент, который оптимизирует селекторы CSS, удаляя ненужную специфичность?
Я обнаружил, что когда я пишу CSS, я намеренно делаю свои селекторы более конкретными, чем это необходимо, чтобы избежать конфликтов и для квази -документации.
Было бы здорово, если бы существовал инструмент, который мог бы анализировать заданную группу правил, определять их «уникальность» с точки зрения пересечения с другими правилами, а затем отбрасывать ненужную специфичность.
Я даже не могу представить, как разработчик инструментов подойдет ко всем сценариям, которые для этого потребуются,но я был потрясен изобретательностью других в этой области раньше и решил, что стоит спросить.
Обновление:
Я добавил награду к этому вопросу, и чем больше я об этом думаю, тем больше понимаю, насколько ценным был бы фильтр специфичности CSS .
Например, при работе с вложенными правилами/селекторами в Sass и LESS , чрезмерная вложенность является общим и колодцем -известный антипаттерн, который может легко привести к чрезмерно специфичным селекторам.
Хорошая иллюстрация этого есть в отличном курсе TutsPlus Поддерживаемый CSS с Sass и Compass :
body {
div.container {
p {
a {
color: purple;
}
}
}
}
. Sass будет следовать этим инструкциям по вложению и выдаст следующий вывод CSS, не возражая против какой-либо ненужной специфики:
body div.container p a {
color: purple;
}
Однако, если бы фильтр специфичности существовал/существует, это могло бы создать потенциальные преимущества для разработчиков CSS :
. Вы можете организовать свои таблицы стилей как 1 :1 сопоставление DOM, подобное тому, что вы видите, когда изучаете правила стиля в Firebug и Chrome Dev Tools. Интеллектуальный редактор/IDE может автоматически -заполнять стили для элементов DOM общими стилями/классами. Эта избыточность затем, конечно, будет отфильтрована фильтром/оптимизатором специфичности.
Структура таблиц стилей может быть предварительно -заполнена инструментом, который сканирует DOM и преобразует его в селекторы/правила CSS. Это означает, что разработчику нужно будет только обновить HTML; «дерево» CSS будет синхронизировано, чтобы отражать текущее состояние DOM. Умный редактор позволит вам перейти к определению CSS для элемента/класса для стилизации --или даже сделать его правила стиля видимыми на отдельной панели.
В некотором смысле это почти похоже на шаг назад -, как функция, которую вы найдете в Dreamweaver или WebAssist, чтобы помочь новичкам изучать CSS. Но основная идея инструмента оптимизации селектора CSS кажется легкой задачей,и тип автоматизации рабочего процесса, который я описал, был бы логическим следующим шагом --, а катализатором стал бы фильтр специфичности.
Я просмотрел некоторые из лучших -известных CSS-редакторов и веб-IDE, но не нашел ничего, что предлагало бы такую функциональность, кроме нацеливания на один элемент и создания для него селектора.
Обновление 2 :Производительность селектора CSS
В ответ на комментарий Spliff вот две замечательные статьи о производительности селекторов CSS:
Влияние селекторов CSS на производительность , Стив Содерс
Эффективная визуализация CSS Криса Койера
Оба согласны с тем, что микро -оптимизация CSS не стоит затраченных усилий, но что более -квалифицированные селекторы потомков — это «катастрофа эффективности». Я сам еще не проверял производительность, но подозреваю, что предлагаемый мной подход «отображение DOM» приведет к снижению производительности без шага оптимизации, будь то вручную или автоматически.
Похожие вопросы, ссылки и инструменты:
Инструмент для просмотра специфики CSS
5 главных ошибок массивного CSS