Каскад, специфичность, наследование
↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая
Зачем это на собесе
«Почему мой стиль не применяется?» — вопрос про каскад. Нужно назвать порядок разрешения конфликтов.
Объяснение
Порядок разрешения конфликтов:
- Происхождение и важность:
!important(author) > обычные author > user-agent. - Слои
@layer(позже объявленный слой сильнее для обычных правил). - Специфичность селектора.
- Порядок в коде — позднее побеждает.
Специфичность (a, b, c): a — количество id, b — классов/атрибутов/псевдоклассов, c — тегов/псевдоэлементов. Inline-стиль сильнее любого селектора.
| Селектор | Специфичность |
|---|---|
p | 0,0,1 |
.card | 0,1,0 |
.card p | 0,1,1 |
#app .card | 1,1,0 |
:where(.a) | 0,0,0 |
:is(.a, #b) | как самый специфичный аргумент |
Наследование: часть свойств наследуется потомками (color, font-*, line-height, visibility), другие — нет (margin, padding, border, background).
Управление: inherit, initial, unset, revert, all: unset.
@layer reset, base, components, utilities; /* явный порядок слоёв */
@layer components { .btn { padding: 8px 16px; } }
@layer utilities { .p-0 { padding: 0; } } /* сильнее компонентов независимо от специфичности */Нюансы и подводные камни
!importantломает каскад, используйте только для утилит.- Вложенность в SCSS увеличивает специфичность: не вкладывайте больше 2–3 уровней.
- Стили из
<style scoped>во Vue добавляют атрибут — специфичность выше. - Порядок подключения файлов CSS влияет на результат.
- Инспектор в DevTools показывает, какие правила перечёркнуты и почему.
Практика
- Посчитайте специфичность 5 селекторов и проверьте в DevTools.
- Настройте
@layerдля reset/base/components/utilities. - Найдите и уберите
!importantиз проекта.
Вопросы с ответами
Что побеждает:
#idили.class .class .class?Побеждает
#id: специфичность считается по разрядам (1,0,0 против 0,3,0).
Какие свойства наследуются?
Текстовые (
color,font,line-height), но не блочные (margin,padding,border).