Явный контроль над специфичностью в CSS?

specificity-pirate

Мы уже привыкли, что специфичность CSS-селекторов и приоритет соответствующих им правил — одно и то же. Но всегда ли должно быть так? Таким вопросом озадачила на этой неделе рабочую группу CSS легендарная Лия Веру.

В ишье на гитхабе Лия обратила внимание на то, что принцип «более конкретные CSS-правила переопределяют более общие» — всего лишь эвристика. В большинстве простых случаев она помогает, но нередко эта эвристика дает сбой, и тогда приходится прибегать к хакам типа повторения одного класса в селекторе несколько раз или добавления лишних :not(). Лия предлложила вместо этих хаков ввести новый функциональный псевдокласс (например, :filter()), похожий на :matches() из селекторов 4 уровня, но c нулевой специфичностью (не меняющий специфичность остальной части селектора).

Идея понравилась Табу Аткинсу, который тут же развил ее: он предложил псевдокласс :is() с двумя аргументами. Первый аргумент — произвольный селектор (как и у :matches()), а второй — набор чисел, явным образом задающий желаемую специфичность (например, :is(.foo, 1 2 3) имел бы специфичность 1 ID, 2 классов и 3 тегов). По умолчанию (без второго аргумента) специфичность равнялась бы нулю. Плюсом этой идеи оказалось то, что ее можно внедрять поэтапно (например, в спецификацию селекторов 4 уровня добавить только вариант с одним аргументом, «обнуляющий» специфичность, а второй аргумент перенести в модуль 5 уровня), чтобы браузерам было проще реализовать ее хоть в каком-то виде.

Другие участники обсуждения предлагали свои варианты. Филип Уолтон (у которого свои давние «счеты» со специфичностью:) предложил «отключать» специфичность на уровне CSS-файла (например, в виде атрибута nospecificity для <link>). А Роман Комаров — автор способа переписать практически любой селектор так, чтобы его итоговая специфичность была как у одного класса, с помощью обновленного :not() из селекторов 4 уровня — предложил вариант создавать свои собственные «слои» («origins» в терминах спецификации CSS Cascade) вдобавок к существующим «авторским», «браузерным», «пользовательским» и т.д. стилям. Хотя это скорее дополнение к селектору :is(), а не замена ему. Наконец, Франсуа Реми предложил свой вариант названия для нового псевдокласса — :when(), в чем-то более логичный (например, button:when(:hover) или input:when([disabled])).

А вы что думаете? Нужен ли нам такой контроль над специфичностью или это лишь увеличит путаницу вокруг нее? И если нужен, то в каком виде? Подключайтесь к мозговому штурму!

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.