Вопрос «CSS как читается» можно понимать двояко: как браузер читает и применяет стили и как читать CSS человеку. Оба смысла важны: первый объясняет, почему одни правила «побеждают» другие, второй помогает разбираться в чужом коде. Разберём и то, и другое.
Как браузер читает CSS
Браузер обрабатывает CSS в несколько этапов:
- Парсинг. Стили из тега
<style>, файлов<link>и inline-атрибутов превращаются в дерево правил. - Построение DOM и CSSOM. Разметка и стили объединяются в дерево отрисовки.
- Каскад и специфичность. Определяется, какое правило применится к элементу.
- Наследование. Часть свойств передаётся от родителя к потомкам.
- Layout и Paint. Рассчитывается положение элементов и происходит отрисовка.
Каскад: сверху вниз
CSS читается сверху вниз. Если два одинаковых по специфичности правила конфликтуют, победит то, что объявлено ниже:
p { color: blue; }
p { color: red; } /* текст будет красным */Специфичность селекторов
Когда правила различаются по селекторам, применяется правило с большей специфичностью. Условный вес:
| Селектор | Вес |
|---|---|
| inline style | 1000 |
| #id | 100 |
| .class, :hover, [attr] | 10 |
| тег, ::before | 1 |
Например, #menu a (100+1) перебьёт .menu a (10+1).
Наследование
Свойства вроде color, font-family наследуются потомками автоматически, а margin, border, padding — нет. Управлять этим можно значениями:
.block { color: inherit; }
.child { color: initial; }!important
Флаг !important повышает приоритет правила до максимума:
.text { color: green !important; }Использовать его стоит редко — он усложняет поддержку и ломает каскад.
Селекторы читаются справа налево
При сопоставлении браузер идёт от правой части селектора к левой. В правиле .menu li a он сначала найдёт все ссылки a, затем проверит, лежат ли они в li внутри .menu. Поэтому длинные селекторы работают медленнее — предпочитайте короткие классы.
Как читать CSS-код человеку
- Смотрите на селектор: что именно стилизуется.
- Определите источник: файл темы, плагин или inline-стиль.
- В DevTools (F12) видно, какие правила применились, а какие перечёркнуты — это самый быстрый способ понять каскад.
- Ищите блоки по комментариям и группировке свойств.
Итоги
Браузер читает CSS по правилам каскада, специфичности и наследования: сверху вниз, с учётом веса селекторов и флага !important. Чтобы разобраться в чужом коде, используйте инспектор DevTools — он наглядно показывает, какие правила победили и почему.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.