04. style.css — философия и базовые секции

style.css — самый большой файл проекта. Он отвечает за всё, что вы видите на странице: цвета, шрифты, отступы, сетки, адаптив. Разберём его сначала как систему, потом — построчно.

Философия CSS проекта

Мы не используем никакие методологии вроде БЭМ, OOCSS или Atomic CSS. И не используем препроцессоры (Sass, Less). Причины простые:

• Проект маленький. Восемь страниц, один автор. Методология — оверхед.
• Хотим читаемость через год. Классы вроде .card и .price-item понятны без изучения конвенций.
• Чистый CSS — вечен. Sass-компилятор устареет, а CSS-файл будет работать всегда.

Зато у нас есть своя система: файл поделён на секции, каждая секция с блоком-паспортом. Разберём эту систему.

Структура файла: десять секций

style.css поделён на десять частей. Каждая часть отвечает за свой блок сайта.

Порядок секций не случаен. Он идёт от «общего» к «частному»: сбросы → каркас → компоненты → адаптив → специфика конкретной страницы. Такая последовательность облегчает отладку: если что-то не то с отступами — ищешь в первых трёх секциях, если с кнопками — в четвёртой, если с тарифами — в десятой.

Секция 1: базовые сбросы и каркас

Разберём первую секцию целиком, построчно.

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
               "Helvetica Neue", Arial, sans-serif;
  background: #f5f7fa;
  color: #1e2a3a;
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

Строка 1: универсальный селектор *

* { margin: 0; padding: 0; box-sizing: border-box; }

Звёздочка * — это универсальный селектор. Он значит «применить правило ко всем элементам на странице без исключения».

Внутри правила три свойства. Разберём каждое.

margin: 0 — обнуляет внешние отступы у всех элементов. В браузерах по умолчанию у <h1>, <p>, <ul> есть отступы «по вкусу разработчика браузера». Мы их убираем, чтобы контролировать отступы сами.

padding: 0 — обнуляет внутренние отступы. Тот же смысл, что и с margin.

box-sizing: border-box — самое важное свойство здесь. Оно меняет способ расчёта ширины.

Сравним два варианта на конкретном примере. Скажем, у нас есть блок с width: 300px, padding: 20px, border: 1px.

С border-box всё предсказуемо: сказали 300 — получили 300, независимо от padding. Без него пришлось бы считать в голове или в калькуляторе.

Отступы в правиле: три свойства в одну строку, разделены ;. Можно было бы каждое на новой строке — было бы то же самое. Одна строка короче и, для такого простого правила, читается лучше.

Строка 3: html

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

Селектор html выбирает корневой элемент документа. Он существует всегда, вокруг всего.

overflow-y: scroll — самое неочевидное свойство проекта. Оно говорит: всегда показывать вертикальную полосу прокрутки, даже если контент короткий и прокрутка не нужна.

Зачем это? Чтобы устранить «дёргание» страницы при переходах. Посмотрим на проблему:

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

Строка 7: body

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
               "Helvetica Neue", Arial, sans-serif;
  background: #f5f7fa;
  color: #1e2a3a;
  line-height: 1.6;
  min-height: 100vh;
}

Пять свойств. Разберём каждое.

font-family — самое длинное правило в файле. Это системный стек шрифтов. Как он работает: браузер идёт по списку слева направо и берёт первый доступный шрифт.

То есть каждая система получит свой родной шрифт — тот, к которому привык пользователь. На Mac — San Francisco, на Windows — Segoe UI, на Android — Roboto. Сайт выглядит «естественно» везде, без загрузки внешних шрифтов.

background: #f5f7fa — светло-серый фон сайта. Именно на нём «висят» белые секции с тенью.

color: #1e2a3a — цвет текста по умолчанию. Тёмно-синий, почти чёрный. Не чистый чёрный #000 — потому что чёрный на белом выглядит жёстко, а тёмно-синий мягче для глаз.

line-height: 1.6 — межстрочный интервал. Значение 1.6 означает «высота строки = 1.6 от размера шрифта». Для шрифта 16 пикселей строка будет 25.6 пикселя. Оптимум для чтения — от 1.4 до 1.7. Меньше — тесно, больше — рыхло.

min-height: 100vh — минимальная высота body — 100% высоты окна браузера. vh = viewport height. Это гарантирует, что даже на коротких страницах body займёт весь экран, и футер не «всплывёт» на середину.

Строка 15: .container

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

Класс .container — обёртка вокруг всего контента страницы. Он решает задачу центрирования и ограничения ширины.

max-width: 1100px — контент не станет шире 1100 пикселей, даже на огромном мониторе. Иначе строки текста были бы слишком длинными, глазам тяжело читать.

margin: 0 auto — классический приём центрирования блочного элемента. 0 сверху и снизу, auto слева и справа. Браузер автоматически распределяет свободное пространство по бокам, и блок встаёт по центру.

padding: 40px 20px — внутренние отступы. Сверху и снизу по 40 пикселей, слева и справа по 20. Верхний отступ отодвигает контент от верхнего края окна, боковые — не дают тексту липнуть к краям на мобильных.

Что мы получили после Секции 1

Всё содержимое сайта живёт внутри .container. На широком мониторе — по центру, не шире 1100 пикселей. На узком — прижато к краям с небольшим отступом.

Итог

• style.css поделён на десять секций, каждая с блоком-паспортом.
• Секция 1 — фундамент: сбросы, шрифт, фон, центрирование.
• * { box-sizing: border-box } — одна строка, меняющая всё.
• html { overflow-y: scroll } — фикс «дёргания» страниц.
• Системный стек шрифтов — отказ от Google Fonts во имя производительности.
• .container — центрирует контент и ограничивает его шириной 1100px.
• Первые девять секций — универсальные, работают на всём сайте.
• Десятая (КП) — специфична для одной страницы offer.html, поэтому в конце файла.

В следующем разделе — Секции 2 и 3: шапка сайта, навигация и общие элементы вроде заголовков, кнопок и CTA-блоков.