При работе над проектами, которые объединяют внешние таблицы стилей и фреймворки пользовательского интерфейса, такие как Material-UI, вычисление приоритета стиля может быть сложной задачей. Что произойдет, если я добавлю класс к кнопке, созданной с использованием Material-UI? Если я добавлю цвет фона к этому классу, заменит ли новый цвет фона цвет фона, заданный фреймворком? К счастью, есть способ вычислить специфичность значений свойств CSS.
MDN Web Docs описывает специфичность как средство, с помощью которого браузеры решают, какие значения свойств CSS наиболее актуальны для элемента и, следовательно, будут применяться. По сути, специфичность определяет, какой селектор CSS применяется к конкретному элементу. В целом рекомендуется быть как можно более конкретным. Существует иерархия специфичности, которая фактически может быть рассчитана на конкретное значение.
Как вы можете видеть на диаграмме выше, существует четыре основных категории уровня специфичности. Встроенные стили написаны непосредственно в теге элемента и являются наиболее конкретными. Идентификаторы - это уникальные идентификаторы, такие как #homepage, которые являются вторыми по значимости. Третий наиболее специфичный селектор - это классы, которые также включают псевдоклассы, такие как: active или: hover. Наконец, наименее специфичны элементы и псевдоэлементы, например h1 или div.
При расчете значения специфичности представьте себе систему «баллов». Для каждого встроенного атрибута стиля добавьте 1000, для каждого идентификатора добавьте 100, для каждого класса добавьте 10 и для каждого элемента добавьте 1. Как правило, более высокая оценка будет наиболее точной, однако это не всегда верно.
Распространенное заблуждение при оценке специфичности состоит в том, что мы используем десятичную арифметику. Это не относится к делу. Независимо от того, сколько селекторов элементов связано вместе, они всегда будут иметь более низкую специфичность, чем селектор класса. Точно так же селектор ID всегда будет превосходить любое количество селекторов классов, а встроенный стиль всегда будет иметь более высокую специфичность, чем ID. Чтобы избежать путаницы, многие предпочитают записывать значения специфичности с использованием нескольких запятых, а не складывать их вместе, чтобы получить оценку. Например, 1001 точка будет записана как 1,0,0,1 (один встроенный и один элемент). Вот пример некоторой путаницы, с которой мы столкнулись бы, если бы думали, что используем десятичную систему.
Хотя кажется, что класс .hello менее специфичен, чем многоэлементные селекторы, это неверно. Фактически, специфичность для элементов составляет 0,0,0,15, что меньше 0,0,1,0. Как видите, использование запятых для разделения различных типов селекторов - гораздо более точный способ вычисления и отображения специфики.
В дополнение к основным 4 категориям, которые определяют уровень специфичности, есть еще несколько факторов, о которых следует подумать с особой тщательностью. Объявление! Important имеет приоритет над любыми другими объявлениями и считается плохой практикой.
! important следует использовать только в крайнем случае и никогда не следует использовать в CSS на уровне всего сайта. Вы всегда должны искать способ использовать специфичность вместо! Important, однако я счел это полезным при замене чужого CSS из внешних фреймворков, таких как Semantic UI. Когда два конфликтующих! Important объявления применяются к одному и тому же элементу, применяется объявление с большей специфичностью.
Наконец, если два значения специфичности абсолютно одинаковы, применяется последнее правило. Например, следующее будет обозначено зеленым цветом.
Источники:
« Https://www.w3schools.com/css/css_specificity.asp »
« Https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity »
