Проект: стилизация

💡 Объяснение

Что делает дизайн хорошим

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

1. Единство: CSS-переменные

Одинаковые элементы должны выглядеть одинаково на всех страницах: один оттенок синего, одни кнопки, одни скругления. Чтобы не держать цвета в голове, их выносят в CSS-переменные:

:root {
  --main: #6c5ce7;
  --accent: #fd79a8;
  --bg: #f5f6fa;
  --text: #2d3436;
  --radius: 16px;
  --space: 16px;
}

h1 { color: var(--main); }
.btn { background: var(--accent); border-radius: var(--radius); }

• Переменные объявляют в :root — это корень документа, переменные будут доступны везде.
• Имя начинается с двух дефисов: --main.
• Используются через var(--main).

Главная польза: захотел поменять основной цвет сайта — меняешь одну строку, и он меняется на всех страницах.

2. Порядок: выравнивание и сетка

• Никаких элементов «на глазок». Всё выравнивается по общему контейнеру и сеткам.
• Ряды — Flexbox, плитки — Grid.
• Левые края текстов, карточек и заголовков должны совпадать — глаз замечает даже небольшой «разнобой».

3. Воздух: система отступов

Новички часто «прижимают» всё друг к другу. Свободное пространство — не пустота, а важная часть дизайна: оно группирует элементы и даёт глазам отдохнуть.

• Выбери шаг отступов и используй только кратные ему значения: 8, 16, 24, 32, 48px.
• Правило близости: связанные элементы ближе друг к другу, несвязанные — дальше. Заголовок карточки ближе к её тексту, чем к соседней карточке.
• Между крупными секциями страницы — большие отступы (48–80px).

4. Контраст и иерархия

• Тёмный текст на светлом фоне. Светло-серый текст на белом — плохо читается.
• Главное выделяется: заголовок заметно крупнее текста, кнопка ярче остального.
• На экране должно быть понятно, куда смотреть первым делом. Если выделено всё — не выделено ничего.

Компоненты

Компонент — повторяющийся элемент интерфейса с единым стилем: кнопка, карточка, заголовок секции. Опиши их один раз классами в CSS и используй на всех страницах:

.btn { … }            /* все кнопки */
.card { … }           /* все карточки */
.section-title { … }  /* заголовки секций */

Живые элементы

Добавь всем кнопкам и ссылкам :hover с transition, а карточкам — лёгкий подъём при наведении. Это делает сайт «отзывчивым». Не забудь :focus-visible для клавиатуры.

Для сильных: тёмная тема

Благодаря переменным тёмная тема делается в несколько строк — браузер сам сообщит, что у человека включена тёмная тема в системе:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e2e;
    --text: #f5f6fa;
  }
}

Как оценить свой дизайн

1. Отойди от экрана на два шага или прищурься — видно ли, где главное?
2. Сравни две страницы подряд — выглядят ли они как части одного сайта?
3. Посчитай, сколько разных цветов и шрифтов используется. Больше 3 цветов и 2 шрифтов — повод упростить.
4. Попроси близких за 10 секунд сказать, о чём сайт и куда нажать.

Частые ошибки

• У каждой кнопки свой цвет и размер.
• Отступы 7px, 13px, 22px — хаос вместо системы.
• Слишком много эффектов: тени, градиенты и анимации везде.
• Цвета переменных объявлены, но в CSS всё равно написаны HEX-коды.

Проверь себя

1. Как объявить и использовать CSS-переменную?
2. Что такое правило близости?
3. Почему «выделено всё» — это плохо?