Фильтр специфичности CSS

Это длинный снимок, но есть ли доступный инструмент, который оптимизирует селектор CSS, удаляя ненужную специфичность?

Я нахожу, что, когда я пишу CSS, я намеренно делаю свои селекторы более конкретными, чем необходимо, чтобы избежать конфликтов и для квази-документации.

Было бы здорово, если бы существовал инструмент, который мог бы анализировать определенную группу правил, определять их "уникальность" в терминах совпадения с другими правилами, а затем удалять любую ненужную специфичность.

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

Update:

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

Например, при работе с вложенными правилами/селекторами в Sass и LESS, чрезмерная вложенность - это common и известный антипаттерн, который может легко привести к чрезмерно специфическим селекторам.

Хорошая иллюстрация этого в отличном курсе 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, чтобы помочь newbs изучать CSS. Но основная идея инструмента оптимизации селектора CSS кажется неинтересной, и описанный мной тип автоматизации документооборота будет логичным следующим шагом - и катализатором будет фильтр спецификаций.

Я рассмотрел некоторые из наиболее известных редакторов CSS и веб-IDE, но не нашел ничего, предлагая этот тип функций, помимо таргетинга на один элемент и создания селектора для него.

Обновление 2: Производительность селектора CSS

В ответ на комментарий Spliff, вот две замечательные статьи о производительности селектора CSS:

Влияние производительности CSS-селекторов от Steve Souders
Эффективно рендеринг CSS от Chris Coyier

Оба согласны с тем, что микрооптимизирующий CSS не стоит усилий, но что чрезмерно квалифицированные селекторы-потомки являются "катастрофой эффективности". Я еще не тестировал себя сам, но подозреваю, что подход "DOM Mapping", который я предлагаю, приведет к удару производительности без шага оптимизации, как вручную, так и автоматически.

Вопросы, относящиеся, ссылки и инструменты:

Точки в Спецификации CSS

Инструмент для просмотра спецификаций CSS

Инструмент для очистки CSS

Заказ по специфичности CSS

Топ-5 ошибок массового CSS

Google: эффективные селектора CSS

Procssor

Очистить CSS

CSS Tidy

Ответ 1

Вы можете попытаться использовать другой подход, попробуйте написать свои селекторы как можно меньше (низкая специфичность). и только сделать их более конкретными, когда это необходимо. При таком способе работы вам не нужен инструмент.

Ответ 2

Мы действительно не можем обойтись без специфики, потому что это единственное, что спасает вас, когда вы сталкиваетесь с двумя или несколькими правилами. Специфика приносит здравомыслие всему правилу CSS, поэтому это скорее благословение, чем проклятие. Некоторые из материалов, о которых вы говорили, например, селектор CSS, можно выполнить с помощью Firefox/Firebug. Меня больше беспокоит совместимость с браузером.

Ответ 3

Просто собираюсь выбросить это там - он не "отвечает" на ваш вопрос, но это инструмент, который мне нравится распространять для людей, которые много программируют на CSS: Firebug.

Если вы не знакомы с ним, это инструмент для веб-браузеров. Вы поднимаете свою страницу после ее установки, щелкните правой кнопкой мыши и выберите "Осмотреть элемент". Он покажет вам все css, затрагивающие разные элементы вашей страницы, и полезно для создания чистого, точного кода css. Также упрощается просмотр мгновенных обновлений о том, как будет выглядеть ваша страница с небольшими изменениями. Он сообщит вам о бесполезном CSS-коде, который будет переопределен другим кодом css.

ТАКЖЕ! Firebug теперь доступен практически для всех браузеров. Не только Firefox. Лично я не могу использовать его в Chrome.

Ответ 4

На самом деле вы можете сделать это, используя HTML5 и CSS3. Стандартный метод заключается в том, чтобы указать элементы, используя атрибут HTML 5 "data-" , а затем сделать выбор CSS для этого атрибута. Это не является целью атрибутов, но вы можете указать некоторые элементы, которые вы можете использовать, чтобы даже переключать тему сайта.

Итак, например, вы можете вручную создать свои специфические фильтры в CSS, указав

<b data-specificity=2>test</b>

где специфичность данных соответствует только родителям.

UPDATE:

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

p[data-specificity="1"]{
    color:red;
    font-family:verdana;
    text-decoration:underline;
}
p[data-specificity="2"]{
    color:black;
    font-family:arial;
}
div.container > *[data-specificity="2"] {
    font-family:impact;
    color:blue;
    text-decoration:underline;
}

Таким образом, эти правила означают, что любой тег p, являющийся прямым дочерним элементом контейнера div и обладающий спецификацией 2, может наследовать свойства из контейнера div. Синий цвет div наследуется p с специфичностью данных 2.

Здесь JSFiddle, где вы можете это увидеть!

Идея состоит в том, что, подобно этому, используя HTML5, вы можете точно контролировать, какие элементы могут наследовать какие свойства. Это много дополнительного кода для записи (для дочерних и родительских элементов), но вы можете использовать это, чтобы избавиться от некоторой ненужной специфики

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