Оформляем небольшую страницу

Страница пекарни из курса HTML получает цвета, отступы и раскладку примерно из 40 строк CSS, а HTML не меняется вообще.

Начинай с решений, а не с правил

Прежде чем писать правила, прими несколько решений: один акцентный цвет, цвет текста и фон с достаточным контрастом, один список шрифтов, базовый размер и шаг отступов, который повторяется везде (например, 8, 16 и 24 пикселя). Страница, которая повторно использует несколько значений, выглядит спокойной и продуманной; страница, где у каждого блока свой чуть другой отступ, выглядит неряшливо, даже если никто не может сказать почему. В CSS для этого есть специальная возможность, пользовательские свойства.

Пользовательские свойства

Пользовательское свойство является придуманным тобой именем, которое начинается с двух дефисов и хранит значение: --accent: #1a5fb4;. Задай свои решения один раз в :root, то есть на элементе html, и используй их где угодно через var(): background: var(--accent);. Пользовательские свойства наследуются, как текстовые, поэтому каждый элемент может прочитать те, что заданы в корне. Чтобы поменять акцентный цвет всего сайта, теперь достаточно изменить одну строку. Свойство можно переопределить и внутри медиазапроса, например чтобы поменять цвета для prefers-color-scheme: dark.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Читаем таблицу стилей сверху вниз

Таблица стилей выше использует что-то почти из каждого урока. В корне хранятся решения. body один раз задаёт шрифт, высоту строки и цвета, а наследование переносит их в каждый абзац. Шапка является флекс-строкой с переносом, поэтому на узком телефоне меню опускается под название, а не сжимается. У main есть max-width и margin: 0 auto, которые сохраняют строки удобными для чтения и выравнивают содержимое по центру на широких экранах. Карточки используют шаблон сетки с auto-fill, поэтому перестраиваются из одного столбца в несколько без медиазапроса, а изображения гибкие. У кнопки есть цвет при наведении и, что не менее важно, заметный контур фокуса для пользователей клавиатуры.

Проверь на настоящих экранах

Проверять CSS значит смотреть. Открой страницу в узком окне (320 пикселей для проверки перекомпоновки по WCAG) и в широком и поищи горизонтальную прокрутку и текст, который касается краёв. Увеличь масштаб до 200 процентов. Пройди страницу клавишей Tab и убедись, что всегда видно, где фокус. Проверь контраст текста и кнопок в инструментах разработчика. Включи в системе тёмный режим или уменьшение движения, если ты делал под них стили. Инструменты разработчика в браузере позволяют менять любое значение на лету и видеть блочную модель любого элемента, и это самый быстрый способ понять, почему что-то находится там, где находится.

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