Коротко: CSS читается браузером «справа налево» (по селектору) и «сверху вниз» (по правилам), с учётом специфичности и порядка. Человеку же CSS читают блоками: селектор → свойства → значения, сверху вниз по файлу. Понимание обоих «взглядов» — ключ к предсказуемым стилям.
Как CSS читает браузер
- Находит все правила, подходящие элементу.
- Сравнивает их по специфичности.
- При равенстве — побеждает правило, написанное ниже.
!importantперебивает всё, кроме другого!important.- Учитывает наследование для наследуемых свойств (
color,font).
Вкладки: как разбирать стили
Селектор браузер «читает» с конца: сначала находит .title, потом проверяет, лежит ли он внутри .card.
.card .title { color: #003F8F; }
/* браузер: найди .title → проверь родителя .card */Практический вывод: не пишите длинные цепочки — они медленнее и хрупче. Достаточно одного-двух классов.
Сила селекторов (от слабого к сильному):
- тег (
p); - класс, атрибут, псевдокласс (
.card,[href],:hover); - идентификатор (
#header); - инлайн-стиль (
style="..."); !important.
Считать «вес» чисел не обязательно — достаточно помнить порядок.
.btn { background: red; }
.btn { background: blue; } /* победит это правило */При равной специфичности выигрывает нижнее правило. Отсюда правило порядка подключения файлов: база → компоненты → страницы.
font: 16px/1.5 "Inter", sans-serif;Сокращения читаются «слева направо»: размер/строка → шрифт. padding: 10px 20px — вертикаль/горизонталь. margin: 0 auto — верх-низ 0, по бокам авто.
Порядок чтения файла (как пишут CSS)
- Переменные и базовые настройки (
:root,body). - Типографика (заголовки, текст, ссылки).
- Компоненты (кнопки, карточки, формы).
- Секции и блоки страниц.
- Утилиты и адаптив (медиа-запросы).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Правило «игнорируется» | перебито более сильным | уточнить селектор или порядок |
| Приходится ставить !important | конфликт специфичности | переписать селектор, а не «воевать» |
| Стиль «слетает» у потомков | наследование | задать явно нужному элементу |
| Сокращение «съело» стиль | font/background сбрасывают |
проверить порядок свойств |
Проверьте себя
.card или #main .card?
Вопросы и ответы
Так быстрее: он сначала находит небольшой набор элементов по правой части, а потом проверяет предков. Это уменьшает объём перебора.
Те, что передаются от родителя к потомку: color, font-family, line-height. Отступы, размеры и фон — не наследуются.
Он ломает каскад: дальше приходится «перебивать» его снова, код запутывается. Применяйте в крайнем случае.
DevTools → вкладка Styles: видно зачёркнутые правила и файл, из которого пришёл победивший стиль.
Итоги
- Браузер выбирает правило по специфичности, затем по порядку.
- Селектор разбирается «справа налево» — держите его коротким.
- !important — крайняя мера, ломающая каскад.
- Файл читают блоками: переменные → типографика → компоненты → адаптив.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.