Как работают каскад и специфичность в CSS?
- Почему мой стиль не применяется?
- Когда можно использовать !important?
При конфликте правил побеждает: !important → более высокая специфичность → более позднее правило. Специфичность считается тройкой (id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы): #nav .item a = (1, 1, 1). Инлайн-стиль сильнее любых селекторов.
- Специфичность сравнивается по разрядам: один id сильнее любого числа классов
- !important ломает предсказуемость — только для утилит и переопределения чужих стилей
- :where() обнуляет специфичность, :is() берёт максимальную из аргументов
А ещё Каскадные слои @layer задают приоритет независимо от специфичности
Подробно
Порядок каскада (упрощённо): происхождение и важность (стили браузера, автора, !important), слои @layer, специфичность, порядок в коде.
Примеры специфичности:
| селектор | специфичность |
|---|---|
p | (0, 0, 1) |
.btn | (0, 1, 0) |
nav .btn:hover | (0, 2, 1) |
#header .btn | (1, 1, 0) |
style="..." | сильнее любого селектора |
Наследование — отдельный механизм: color, font наследуются от родителя, margin и border — нет; наследованное значение слабее любого правила, нацеленного на сам элемент.
Практика: держать специфичность низкой и ровной (методология БЭМ — один класс на элемент, CSS Modules, утилитарные классы); id для стилей не использовать.
Что хотят услышать
- Порядок разрешения конфликтов.
- Подсчёт специфичности.
- Почему избегают !important и id.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Побеждает всегда последнее правило в файле, а специфичность учитывается только для id
- ✗Десять классов сильнее одного id, потому что веса складываются
- ✓!important, затем специфичность (id, классы, теги), затем порядок правил
- ✗Тег сильнее класса, если стоит позже в файле
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.