Как браузер читает CSS?

Браузер читает CSS в два этапа: разбирает файл в CSSOM, а потом сопоставляет правила с элементами DOM.

Разбор

• Текст CSS превращается в CSSOM — дерево правил с селекторами и свойствами.
• Некорректные правила и неизвестные свойства пропускаются без ошибки.

Сопоставление селекторов

Селекторы проверяются справа налево:

.menu li a { color: red; }

Для каждой ссылки a браузер проверяет, есть ли у неё предок li, а у него — предок .menu. Так быстрее отбросить неподходящие элементы: большинство элементов не являются a.

Вычисление стилей

Для каждого элемента собираются подходящие правила, конфликты решаются каскадом (важность, слой, специфичность, порядок), затем применяется наследование и вычисляются итоговые значения.

Что это значит на практике

Короткие селекторы по классам работают быстро и предсказуемо; глубокие цепочки и :has() на больших DOM дороже.

Коротко для собеседования

CSS разбирается в CSSOM, селекторы сопоставляются с DOM справа налево, конфликты решает каскад, итоговые стили идут в render tree.

Подробнее: web.dev — Constructing the Object Model