Мой дэйли дайджест

одно техническое понятие в день

CSS (Cascading Style Sheets)

30 июня 2026 · ~12 мин чтения

веб стандарт дизайн фронтенд история

CSS (Cascading Style Sheets)

CSS — это язык описания внешнего вида документа, написанного на HTML или XML. Он отделяет «что» (структура) от «как» (оформление): шрифты, цвета, отступы, расположение блоков, анимации.

История

Идея отделить оформление от содержания витала в воздухе с самого появления веба. Изначально, в 1991 году, HTML Тима Бернерса-Ли был чисто структурным: заголовок, абзац, ссылка, список — и всё, без указания шрифтов и цветов. Браузер сам решал, как это нарисовать.

Уже к 1993 году стало понятно: дизайнерам этого недостаточно. Появился Mosaic, чуть позже Netscape, начался браузерный бум, и вместе с ним — гонка собственных HTML-тегов: <font>, <center>, <bgcolor>. Каждый браузер тянул HTML в свою сторону, страницы превращались в кашу из вёрстки и стилей.

В октябре 1994 года норвежец Хокон Виум Ли (Håkon Wium Lie), работавший тогда в CERN под началом того же Бернерса-Ли, опубликовал предложение под названием Cascading HTML Style Sheets. Слово «cascading» (каскадный) было ключевым: Хокон предложил систему, где несколько источников стилей (от автора страницы, от пользователя, от браузера) могли мирно сосуществовать и накладываться друг на друга по понятным правилам приоритета. Это был концептуальный прорыв — раньше стили из разных мест просто конфликтовали.

В декабре 1996 года консорциум W3C выпустил рекомендацию CSS Level 1 — первый официальный стандарт. Хокон и швед Берт Бос (Bert Bos) стали соавторами. CSS1 умел немного: шрифты, цвета, отступы, выравнивание, фон.

Дальше — десятилетия мучительного развития:

С 2017 года CSS получил по-настоящему мощные инструменты: Grid Layout (раскладка сеткой), Custom Properties (переменные), clamp(), calc(), контейнерные запросы. Сегодня на чистом CSS делают то, для чего двадцать лет назад требовался JavaScript и три библиотеки.

Хокон Виум Ли, кстати, потом много лет работал главным техническим директором Opera Software. Берт Бос до сих пор активен в W3C.

Что это такое

CSS — это декларативный язык. Ты не пишешь алгоритм «как нарисовать кнопку», ты описываешь желаемый результат: «у всех кнопок класса .primary фон должен быть синим, текст — белым, отступы — 12 пикселей сверху и снизу, 24 слева и справа». Браузер сам разбирается, как это реализовать.

Структура у CSS-правила минимальная: селектор, который указывает, к каким элементам применить стиль, и блок объявлений — список свойств и их значений, разделённых точкой с запятой:

.primary {
  background: #1a73e8;
  color: white;
  padding: 12px 24px;
}

В этом примере .primary — селектор (все элементы с CSS-классом primary), а внутри фигурных скобок — три свойства.

Главная сила CSS — в трёх механизмах:

Каскад (cascade) — система приоритетов, когда к одному элементу применяются несколько правил. Правила собираются из разных источников (браузерные дефолты, авторские стили, пользовательские настройки), сортируются по специфичности и порядку, и побеждает «самое сильное» объявление для каждого свойства.

Наследование (inheritance) — некоторые свойства (шрифт, цвет, высота строки) автоматически передаются от родителя к потомкам. Объявил font-family на <body> — и она применилась ко всему, кроме элементов, у которых явно задано своё значение.

Бокс-модель (box model) — каждый HTML-элемент представляется прямоугольником из четырёх слоёв: content (содержимое), padding (внутренние отступы), border (рамка), margin (внешние отступы). Это базовая ментальная модель: всё на странице — это прямоугольники, вложенные в прямоугольники.

CSS отличается от других похожих штук:

Аналогии из жизни

CSS — это как форма школьной одежды. В уставе школы (HTML) написано: «у класса есть ученики». А в правилах формы (CSS) — «у всех учеников нашей школы синие пиджаки, у пятиклассников ещё и галстук». Меняешь правила — переодевается вся школа, не нужно бегать к каждому. Где ломается: в школе ребёнок один к одному наследует форму. В CSS наследуются только некоторые свойства (цвет шрифта — да, размеры блока — нет), и это правило путает почти всех новичков.

Каскад — это как очередь решений в семье. Бабушка говорит «сладкое перед обедом нельзя», мама говорит «можно одну конфету», ребёнок говорит «я сам решу». Чья команда сработает, зависит от негласной иерархии: чем «специфичнее» источник (родитель важнее бабушки), тем выше приоритет. Где ломается: в семье иерархия мутная, и решение принимается через скандал. В CSS она формальная и считаемая: у каждого селектора есть числовая специфичность, и побеждает большее число. Никакого скандала.

Бокс-модель — это как товар в коробке на полке. Сам товар — content. Внутри коробки воздух и пенопласт — padding. Картон коробки — border. Расстояние до соседних коробок на полке — margin. Где ломается: в магазине пара коробок, стоящих вплотную, имеют двойной картон между собой. В CSS два margin-а у соседних блоков по вертикали схлопываются в один (margin collapse) — это поведение по умолчанию, и оно ловит всех, кто пытается рассчитать отступы арифметически.

Как это работает

Когда браузер открывает HTML-страницу, он проходит следующие этапы:

  1. Парсинг HTML — браузер разбирает HTML-документ и строит DOM (Document Object Model) — дерево элементов в памяти.
  2. Парсинг CSS — параллельно собирает все стили: встроенные (<style>), внешние (<link rel="stylesheet">), inline (style="..."), браузерные дефолты. Строит CSSOM — дерево CSS-правил.
  3. Render tree — соединяет DOM и CSSOM в render-дерево, где у каждого видимого элемента уже посчитаны итоговые стили.
  4. Layout (reflow) — считает геометрию: где какой блок будет на странице, какие у него размеры.
  5. Paint — закрашивает пиксели: цвета, фоны, тени, текст.
  6. Composite — собирает финальную картинку из слоёв и отдаёт видеокарте.

Самое интересное — на шаге 3. Как браузер решает, какой стиль применить к каждому элементу, если правил много и они конфликтуют?

Используется формула приоритета — specificity (специфичность). Это четырёхкомпонентный счётчик (a, b, c, d):

Сравниваются как четырёхзначные числа: (0,1,0,0) сильнее, чем (0,0,9,9). Поэтому один ID-селектор перебивает девять классов.

Поверх специфичности есть «модификаторы»:

Это и есть тот самый каскад, в честь которого CSS назван.

Пример. Есть элемент <button class="primary" id="cta">. К нему применимы три правила:

button { color: gray; }              /* (0,0,0,1) */
.primary { color: blue; }            /* (0,0,1,0) */
#cta { color: red; }                 /* (0,1,0,0) */

Победит красный, потому что у ID-селектора специфичность (0,1,0,0) — выше всех.

Раскладка (layout) делается одним из нескольких механизмов:

Современная мантра: «Grid для общего макета, Flexbox для деталей внутри».

Где встречается в обычной жизни

Где встречается в IT и бизнесе

Нужен когда…

…нужно описать оформление декларативно, чтобы потом легко менять глобально. Если ты пишешь скрипт, который при каждом изменении кнопки вручную меняет 20 свойств — ты пишешь то, что должно быть в CSS.

Кто пользуется

CSS используют все, кто делает что-либо для веба. По данным W3Techs (2025), CSS — самый распространённый стандарт оформления в интернете: его поддерживают 100% сайтов из топ-10 миллионов. Браузеры Chrome, Safari, Firefox, Edge реализуют CSS-стандарты W3C, но с разной скоростью и иногда с собственными префиксами (-webkit-, -moz-).

Крупные компании, которые активно влияют на CSS-стандарты:

Дизайн-системы крупных компаний (Material UI от Google, Carbon от IBM, Polaris от Shopify) — это, по сути, упакованные библиотеки CSS-классов и компонентов.

Альтернативы и конкуренты

Когда НЕ стоит использовать

Главный антипаттерн

Использовать !important для решения конфликта специфичности. Это как взять кувалду, чтобы прибить гвоздь. Через полгода в проекте окажется 50 правил с !important, которые перебивают друг друга, и никто не сможет ничего поменять. Лучше — поднять специфичность нужного селектора или переписать архитектуру стилей.

Связанные понятия

Литература и источники

Где встретилось у меня

Вчера я разбирался с офсайтом ЖК: на странице ехал блок с маркерами (hero-strip), а карусель в галерее работала странно. Пришлось залезть в CSS-токены проекта, разобраться с правилом для min-height, поменять CSS галереи с тайлов на карусель и пересинхронизировать видимость элементов в шапке. Без понимания, как именно каскад выбирает «победителя» среди конфликтующих правил, ковыряться в чужих стилях бесполезно — поэтому понятие настолько фундаментальное, что обходить его в этом блоге было нечестно.

Краткое резюме