Каскадные таблицы стилей (CSS)

Что это такое

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

Почему это важно

Одна и та же таблица стилей даёт совершенно разный результат в руках двух людей, и разница почти никогда не объясняется талантом. Дело в том, понимают ли они каскад — какое правило побеждает и почему — и блочную модель, откуда на самом деле берутся ширины и отступы. Команды, которые этого не понимают, пишут !important, чтобы убежать от собственной специфичности, добавляют обёртки ради выравнивания, которого не понимают, и переписывают таблицу стилей каждые два года. Однако есть и другая сторона: команды, которые понимают, держат маленький файл, который переживает редизайны, потому что правила говорят то, что значат, и проигрывают друг другу по прослеживаемым причинам.

Что в этом треке

Каскад и блочная модель (02-frontend/05-css/01-cascade-and-box-model) — как выбирается победившее значение и откуда берётся каждый пиксель размера элемента.
Flexbox и grid (02-frontend/05-css/02-flexbox-and-grid) — две системы раскладки и то, когда каждая подходит задаче по форме.
Медиа- и контейнерные запросы (02-frontend/05-css/03-media-and-container-queries) — адаптация раскладки к пространству, в котором она действительно находится.
Современные возможности CSS (02-frontend/05-css/04-modern-css) — пользовательские свойства, вложенность, :has() и функции, которые заменили целые инструментальные цепочки.

Предварительные требования

Язык гипертекстовой разметки (HTML) (02-frontend/03-html)

Что читать дальше

Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — дисциплина, выросшая вокруг раскладки CSS, когда механика уже знакома.
Tailwind CSS (02-frontend/14-tailwind-css) — подход «сначала утилиты», который меняет проектирование таблицы стилей на читаемые имена классов.