Структура CSS строится вокруг правил, где каждое правило состоит из селектора и блока объявлений. Именно эта базовая архитектура позволяет точно указывать, какие элементы страницы получат конкретные стили, и определяет, как браузер интерпретирует весь файл стилей.

Понимание того, как устроены declarations, rulesets и at-rules, позволяет писать чистый, масштабируемый код и быстро находить ошибки. В 2026 году эта структура дополнилась нативной вложенностью и cascade layers, но фундамент остался неизменным.

Ниже разберём анатомию одного правила, внутренний механизм работы браузера, современные способы организации больших стилей и типичные ловушки, с которыми сталкиваются даже опытные разработчики.

Анатомия одного CSS-правила: от селектора до значения

Любой файл стилей — это последовательность правил. Самое простое правило выглядит так:

h1 { color: navy; font-size: 2.2rem; }

Здесь h1 — это селектор. Он говорит браузеру: «найди все элементы

». После него идёт блок объявлений, ограниченный фигурными скобками. Внутри блока находятся отдельные объявления (declarations). Каждое объявление состоит из свойства (property) и значения (value), разделённых двоеточием, и заканчивается точкой с запятой.

Свойство — это идентификатор, который браузер понимает (color, margin, display). Значение описывает, как именно применить это свойство. Браузер игнорирует любые пробелы вокруг двоеточия и точки с запятой, поэтому можно писать как компактно, так и с отступами для читаемости.

Если в блоке несколько объявлений, они разделяются именно точкой с запятой. Последнюю точку с запятой можно опустить, но опытные разработчики всегда её ставят — это защищает от ошибок при добавлении новой строки.

Как браузер строит CSSOM и применяет правила

Когда страница загружается, браузер сначала парсит HTML и создаёт DOM. Параллельно он считывает CSS — внешний файл, тег