Как организовать CSS

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

Внешний файл стилей

В примерах курса стили лежат в теге <style>. На настоящем сайте их выносят в отдельный файл с расширением .css и подключают тегом <link> в <head>:

<link rel="stylesheet" href="styles.css">
<p>Стили этой страницы лежат в файле styles.css.</p>

Один файл стилей обслуживает все страницы сайта, а браузер скачивает его один раз и запоминает.

Порядок внутри файла

Правила удобно располагать от общего к частному — в том же порядке их легче искать:

styles.css
  1. Переменные      — цвета, шрифты, отступы на :root
  2. Базовые стили   — body, заголовки, ссылки, картинки
  3. Раскладка       — шапка, колонки, подвал
  4. Компоненты      — кнопки, карточки, формы
  5. Утилиты         — мелкие классы вроде .hidden

Большой проект делят на несколько файлов по тем же разделам.

Базовые стили

Обычно файл начинают с короткого сброса — правил, которые убирают неудобные умолчания браузера:

*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}
 
img {
  max-width: 100%;
  height: auto;
}

Имена классов: БЭМ

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

<style>
  .card { padding: 12px; border: 1px solid silver; margin-bottom: 8px; }
  .card__title { margin: 0 0 4px; font-size: 18px; }
  .card__price { color: seagreen; }
  .card--sale { border-color: crimson; }
</style>
 
<div class="card">
  <h3 class="card__title">Рюкзак</h3>
  <span class="card__price">40 €</span>
</div>
<div class="card card--sale">
  <h3 class="card__title">Палатка</h3>
  <span class="card__price">90 €</span>
</div>

По имени класса сразу видно, к какому компоненту он относится, а все селекторы — из одного класса и одинаковой силы. Подробно БЭМ и другие методологии разобраны в следующей главе — «Методологии и архитектура CSS».

Комментарии и слои

Комментарии в CSS пишут между /* и */. Ими подписывают разделы файла. Правило @layer (каскадные слои) задаёт порядок разделов явно: стили из более позднего слоя побеждают, какой бы ни была специфичность:

@layer base, components;
 
/* Базовые стили */
@layer base {
  a { color: steelblue; }
}
 
/* Компоненты */
@layer components {
  .btn { color: white; }
}

Подробно слои разобраны в уроке «Каскадные слои: @layer» в конце этой главы.

Частая ошибка

Длинные селекторы и id ради «надёжности». Правило с #sidebar настолько сильное, что потом его не перебить обычным классом:

<style>
  #sidebar .menu a { color: steelblue; }
  .active { color: crimson; font-weight: bold; }
</style>
 
<nav id="sidebar">
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#" class="active">Каталог — должен быть красным</a></li>
  </ul>
</nav>

Класс .active проиграл, и ссылка осталась синей. Оформляйте элементы короткими селекторами из одного класса — тогда побеждает то правило, что ниже, и стили предсказуемы.