Код пишется один раз, а читается — десятки. Его будете перечитывать вы сами через месяц, коллеги в команде, ревьюеры. Аккуратно оформленный CSS понятен с первого взгляда, а неряшливый превращается в головоломку, даже если работает правильно. Хороший codestyle — это не педантизм, а уважение к тому, кто будет читать код, включая будущего вас. В командах единый стиль оформления часто обязателен.

После этого урока вы будете писать чистый, читаемый и последовательный CSS — и это станет вашей профессиональной привычкой.

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как оформлять правила: отступы, пробелы, точки с запятой.
• Как располагать и группировать правила в файле.
• Как осмысленно называть классы.
• Зачем и как писать комментарии в CSS.
• Каких вредных привычек избегать.

Ключевые термины

• Codestyle — свод правил оформления кода.
• Форматирование — визуальное оформление: отступы, переносы, пробелы.
• Консистентность — единообразие оформления во всём проекте.
• Комментарий — пояснение в коде, не влияющее на результат (/* ... */).

Форматирование правил

Первое, что бросается в глаза, — как оформлены сами правила. Аккуратное правило: каждое объявление на своей строке, отступ внутри блока, пробел после двоеточия, точка с запятой в конце каждого объявления:

.card {
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #ffffff;
}

Сравните с неряшливым вариантом .card{padding:1.5rem;border-radius:12px} — он работает так же, но читать его тяжело. Точку с запятой ставьте даже после последнего объявления: так при добавлении новой строки вы не забудете её и не сломаете правило. Единообразные отступы (обычно 2 пробела) и переносы — основа читаемости.

Порядок и группировка

Внутри файла правила стоит располагать осмысленно, а не в случайном порядке. Хороший подход — группировать по компонентам и отделять группы комментариями-заголовками, как мы делали в прошлом уроке:

/* --- Шапка --- */
.header { ... }
.nav { ... }

/* --- Карточки услуг --- */
.card { ... }
.card__title { ... }

/* --- Форма --- */
.contact { ... }

Порядок групп удобно держать таким же, как порядок блоков на странице, — сверху вниз. Тогда, читая CSS, вы движетесь по странице от шапки к подвалу. Внутри правила свойства тоже можно упорядочивать (например, сначала расположение, потом размеры, потом оформление) — главное, делать это последовательно во всём проекте.

Осмысленные имена

Имена классов должны говорить о назначении, а не о внешнем виде. Класс .card понятен и переживёт смену дизайна, а .red-box привязан к цвету — если карточка станет синей, имя начнёт врать.

/* Плохо: имя про внешний вид */
.big-blue-text { ... }

/* Хорошо: имя про роль */
.section__title { ... }

Называйте элементы по их роли в интерфейсе — так, как мы это делали в BEM. Хорошее имя не приходится менять при смене оформления, и по нему сразу понятно, что это за элемент. Избегайте бессмысленных block1, div2, stuff — они не несут информации.

Комментарии и вредные привычки

Комментарии в CSS пишут между /* и */. Они не влияют на результат, но помогают понять «почему так»:

/* Отступ компенсирует фиксированную шапку */
.main {
  margin-top: 80px;
}

Комментируйте не очевидное («красим в синий» писать не нужно), а неочевидное — причины нестандартных решений и назначения секций. Напоследок — список привычек, которых стоит избегать: не гнаться за высокой специфичностью и #id в стилях, не использовать !important без крайней нужды, не давать имена по внешнему виду, не оставлять закомментированный «мёртвый» код и не смешивать разные стили оформления в одном проекте. Главное правило — консистентность: выберите единый стиль и придерживайтесь его везде.

Применяем в проекте

Причешем итоговый файл стилей сайта. Приведём все правила к единому форматированию, сгруппируем по компонентам сверху вниз и добавим поясняющие комментарии.

/* ============================
   Базовые стили
   ============================ */
body {
  font-family: "Roboto", Arial, sans-serif;
  color: #333;
  margin: 0;
}

/* ============================
   Шапка
   ============================ */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

/* ============================
   Карточки услуг
   ============================ */
.card {
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #fff;
}

/* ============================
   Форма обратной связи
   ============================ */
.contact input,
.contact textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

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

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

• Неряшливое форматирование.
  Отсутствие отступов и переносов делает код нечитаемым, даже если он работает.
• Имена по внешнему виду. .red-box врёт при смене дизайна; называйте по роли.
• Мёртвый код.
  Не оставляйте закомментированные куски «на всякий случай» — они засоряют файл.
• Непоследовательность.
  Смешение разных стилей оформления в одном проекте хуже, чем любой один стиль, выдержанный до конца.

Итоги

Поздравляем — вы завершили второй курс! Вы прошли огромный путь: научились строить гибкие макеты на Flexbox, писать осмысленную семантическую разметку, создавать и валидировать формы и, наконец, содержать CSS в чистоте — с BEM, контролем специфичности, переиспользуемыми классами и аккуратным codestyle. Ваш проект превратился из простой страницы в цельный, доступный и профессионально устроенный сайт компании, а код за ним — образец аккуратности.

Вы стали заметно сильнее как верстальщик — по-настоящему гордитесь этим результатом! Впереди третий курс, где вы освоите CSS Grid, позиционирование и адаптивную вёрстку и научитесь делать сайты, которые безупречно выглядят на любом экране. Но это уже следующая ступень — а сегодня отпразднуйте своё достижение. Вы его заслужили!