Как работает CSS в браузере

CSS обрабатывается браузерами поэтапно:

1. Парсинг: Браузер загружает CSS и преобразует его в объектную модель (CSSOM).
2. Каскадирование: Определяет приоритет стилей (инлайн > ID > классы > теги).
3. Вычисление значений: Конвертирует относительные единицы (em, rem, %) в пиксели.
4. Формирование дерева рендеринга: Создаётся структура из элементов, к которым применяются стили.

Пример приоритета:

/* 1. Тег (низкий приоритет) */
div { color: red; }

/* 2. Класс (выше) */
.my-class { color: blue; }

/* 3. ID (максимальный) */
#my-id { color: green; }

Важно: !important ломает каскад, а display: none исключает элемент из дерева рендеринга.