15 февраля 2022 г. (изменено: 15 февраля 2022 г.)
Канал: @cherkashindev
Почему CSS называется каскадными **таблицами стилей?
Каскад** — это алгоритм, который определяет, как вычислить результирующие стили элементов на основе CSS правил, объявленных в различных источниках.
CSS правила могут быть объявлены в следующих источниках:
- User-agent stylesheets (Браузерные стили) - дефолтные стили браузера, обычно мы сбрасываем их с помощью CSS Reset
- Author stylesheets (Авторские стили) - Стили задаваемые разработчиками, именно эти стили и пишем мы с вами.
- User stylesheets (Пользовательские) - стили, которые могут применять к нашему сайту обычные пользователи. Возможно когда-то, вы видели, как кто-то использует их, чтобы задать кастомный вид для ВК.
То есть, для применения стилей, браузеру необходимо знать не только специфичность правила, но и источник этих правил, ведь у них тоже есть свой приоритет:
- Авторские/Правила разработчиков - **самый приоритетный **2. Пользовательские
- Браузерные стили
При применении !important всё становится с ног на голову и приоритеты меняются следующим образом:
- Браузерные стили с
!important- **самый приоритетный **2. Пользовательские с!important3. Авторские/Правила разработчиков `!important
`Таким образом, алгоритм каскада выглядит вот так:
- Найти стили из различных ресурсов, которые применимы к данному элементу
- Выбрать источник с наибольшим приоритетом (важен именно приоритет источника, специфичность всё ещё не учитывается)
- В ход идёт алгоритм специфичности, чтобы выбрать свойство с наибольшим весом
- Если специфичность нескольких правил равна, в результате берётся то значение, которое объявлено позже
**Вывод **Для понимания тема кажется полезной, но на практике ваши стили всегда будут перебивать браузерные стили, а пользовательские стили поддерживаются всё меньше:
**Примеры **- CSS Cascading and Inheritance Level 4 - Example 18
**Ещё по теме **- Дока - принцип каскада