Каскад: источник и порядок

Каскад — это алгоритм CSS, определяющий, какое объявление стиля выигрывает, когда несколько правил применяются к одному свойству одного элемента. Он учитывает источник, важность, специфичность и порядок в исходном коде.

Объявления CSS поступают из трёх источников, расположенных в порядке приоритета:

1. Таблица стилей пользовательского агента — значения браузера по умолчанию
2. Пользовательская таблица стилей — пользовательские стили (для специальных возможностей)
3. Таблица стилей автора — ваши файлы CSS

Для обычных объявлений (без !important) стили автора переопределяют пользовательские стили, а пользовательские стили переопределяют стили пользовательского агента. Поэтому ваш CSS имеет приоритет над значениями браузера по умолчанию.

Добавление !important изменяет порядок источников на обратный для этого объявления:

1. !important пользовательского агента
2. !important пользователя — наивысший приоритет (специальные возможности)
3. !important автора

Поэтому пользовательские переопределения для специальных возможностей (например, принудительные цвета) нельзя отменить с помощью CSS автора.

Когда конкурируют два объявления из одного источника, победителя определяет специфичность. Выигрывает более высокая специфичность — именно об этом разработчики в первую очередь думают при отладке CSS.

Если два правила имеют одинаковую специфичность, выигрывает то, которое расположено позже в таблице стилей. Это правило «порядка в исходном коде». Поэтому важен порядок операторов @import и объявлений @keyframe.

Слои каскада CSS (@layer) добавляют новый этап каскада между источником и специфичностью. Порядок слоёв определяет приоритет: объявление в более позднем слое выигрывает у объявления в более раннем независимо от их специфичности.

Полный порядок приоритетов (от наивысшего к наименьшему):

1. Источник + важность (!important пользователя, !important автора)
2. Значения анимации
3. Слои CSS (поздние слои имеют приоритет)
4. Специфичность
5. Порядок в исходном коде
6. Значения переходов

Наследование отличается от каскада. Унаследованные значения поступают из вычисленного стиля родительского элемента. Они уступают любому непосредственно применённому значению, даже если оно задано правилом с низкой специфичностью.

Размещайте более специфичные стили (стили вариантов) после базовых стилей в таблице стилей. Поэтому файлы компонентов следует подключать после файлов сброса и базовых файлов.

На панели стилей DevTools правила перечислены от самого высокого до самого низкого приоритета. Перечёркнутые правила проиграли в каскаде. Наведите указатель на правило, чтобы увидеть его исходный файл и номер строки для отладки.

Два правила применяются к одному свойству и имеют одинаковую специфичность. Какое из них выигрывает?

Каскад разрешает конфликты стилей, используя источник (автор > пользователь > браузер), затем важность (!important меняет порядок на обратный), затем порядок @layer, затем специфичность и порядок в исходном коде. Понимание каскада позволяет точно предсказать, какое правило выиграет в любом конфликте, — больше никаких догадок.