Стиль — это восемь настроек, а не «красиво»

Урок 13.1 · Интерфейсы и сайты с нуля · Модуль 13. Один макет, разные стили · Бесплатно

Цель урока: Увидеть, что стиль меняется значениями переменных, а не переписыванием страницы.

Нужно знать заранее: Модули 8 и 10 траектории

Объяснение

Зачем это нужно: Заказчик говорит «сделайте в деловом стиле» — и это самое неудобное задание из всех. Непонятно, что менять: цвет? шрифт? всё сразу? Отсюда недели переделок и фраза «я представлял иначе». На самом деле за любым прилагательным стоит короткий список конкретных решений, и он умещается в восемь пунктов. Этот урок — про то, как их увидеть и как переключать.

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

Разбор по шагам: 1. Откройте превью и посмотрите на страницу. Обратите внимание: она не «сломана», у неё просто другой характер. 2. Найдите в коде блок .page. Внутри него — переменные: --accent, --radius, --pad, --size, --border. Все элементы страницы берут значения оттуда. 3. Поменяйте --radius с 26px на 6px. Карточка и кнопка сразу станут строгими — это одно решение из восьми. 4. Поменяйте --accent с #ff6b4a на #1e3a8a. Акцент стал сдержанным. 5. Поставьте --pad: 20px и --size: 15px. Плотность и кегль — то, что чаще всего и создаёт «деловое» ощущение, хотя об этом почти не говорят. 6. Уберите толстую обводку: --border: 1px solid #dbe3ec.

Психология: почему глаз видит одно: Скругление и толщина обводки читаются мгновенно, ещё до текста. Крупные радиусы и толстая цветная рамка — язык «мягко и по-детски». Прямые углы и тонкая линия — язык «строго и по делу». Это не мода: маленький радиус повторяет формы предметов, которые человек считает точными (документ, прибор, таблица), а большой — формы игрушек и наклеек. Поэтому одна цифра в border-radius меняет впечатление сильнее, чем перебор десяти оттенков.

Частая ошибка: Менять цвет и считать, что стиль поменялся. Цвет — только один параметр из восьми. Если оставить радиус 26 px и кегль 20 px, страница с синим акцентом всё равно прочитается как детская — просто «детская в синем». Второе: менять значения в десяти местах вместо переменных. Тогда следующая правка стиля снова займёт час.

Важно: Проверка смотрит на готовую страницу: радиус карточки, цвет кнопки, кегль, отступы, сохранность текста. «Стало ли по-деловому» она не проверяет и не может — это решает человек. Зато параметры проверяются точно, и их достаточно, чтобы поймать почти все провалы.

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

/* Стиль живёт в переменных, а не в разметке */
.page {
  --accent: #1e3a8a;
  --radius: 6px;
  --pad: 20px;
  --size: 15px;
  --border: 1px solid #dbe3ec;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--pad);
  border: var(--border);
}

.button {
  background: var(--accent);
  border-radius: var(--radius);
  min-height: 44px;
  padding: 12px 20px;
}

Уроки модуля 13

• 13.1 Стиль — это восемь настроек, а не «красиво» — вы здесь (бесплатно)
• 13.2 Деловой и премиальный: разница в воздухе, а не в цвете (по подписке)
• 13.3 Молодёжный, детский, школьный: кому какой кегль (по подписке)
• 13.4 Праздничный слой: декор меняется, структура нет (по подписке)
• 13.5 Проект: три брифа — три стиля на одной странице (по подписке)