Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

Автор Мария Багулина

Мы создаём веб-сайты с помощью CSS, что расшифровывается как «Cascading Style Sheets», «каскадные таблицы стилей». Но что значит «каскадные»?

Каскад — один из самых мощных инструментов CSS. Но если вы не знаете принципы его работы, он может доставить проблем.

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

1. Важность

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

1. transition (переход). Правила, которые применяются к активному переходу, имеют первостепенную важность.
2. !important. Если поставить !important в конце правила, оно перейдёт на этот уровень каскада. В идеале вы должны использовать !important только для переопределения inline-стилей или других !important из сторонних библиотек.
3. animation (анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде.
4. normal. На этом уровне находится основная часть правил.

Как видите, эти типы обеспечивают корректную анимацию элементов. Если оба правила относятся к одному уровню, приоритет определяется на другой ступени каскада.

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

1. Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
2. Пользователь. Стили, которые пользователь подключает через настройки браузера.
3. Браузер. У каждого браузера есть свой набор стилей — например элемент всегда использует стиль браузера по умолчанию.
   Так выглядит кнопка в вашем браузере

Примечание Важно! Иерархия для правил с !important здесь работает наоборот: !important-правило браузера выигрывает у !important-правила веб-сайта, тогда как обычные правила сайта превосходят правила браузера.

3. Специфичность

На третьей ступени важна специфичность правила. Значение специфичности определяется исходя из уровней селекторов CSS.
Всего уровней четыре:

1. inline. Стили, объявленные в HTML-свойстве style, обладают наибольшей специфичностью.
2. id. Можно использовать идентификатор (синтаксис #id) для определения стиля конкретного элемента.
3. класс | атрибут | псевдокласс. Определять стиль элемента также позволяют классы (синтаксис .class). Этот уровень включает селекторы HTML-атрибутов, например [checked] или [href="https://wattenberger.com"], и псевдоклассы, такие как :hover и :first-of-type.
4. тип | псевдоэлемент. Тип тега (синтаксис type) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде :before и :selection.

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

Когда в следующий раз вам захочется написать волшебное слово !important, лучше притормозите, оглянитесь назад и выясните, на каких ступенях каскада находятся конфликтующие стили. А ещё можете почитать спецификацию CSS.

А теперь небольшой тест: как думаете, какое из двух правил победит?