Теория — Урок 44

Главная идея

Браузеру всё равно, в каком порядке стоят свойства и в скольких файлах лежит CSS — результат на экране одинаков. А вот человеку — нет. Через полгода вы (или коллега) откроете файл на 2000 строк, чтобы поправить одну кнопку, и потратите 10 минут на поиск нужного правила вместо 10 секунд. Организация CSS — это инвестиция не в скорость браузера, а в скорость команды. Чем понятнее структура, тем меньше «случайных» правок и тем реже одно изменение ломает другое.

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

Как это работает: четыре уровня порядка

Организация наводится на четырёх уровнях, от мелкого к крупному.

1. Порядок свойств внутри правила

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

/* components/button.css */
.button {
  /* 1. Позиционирование */
  position: relative;
  z-index: 1;
  /* 2. Блочная модель */
  display: inline-flex;
  gap: 8px;
  padding: 10px 16px;
  /* 3. Типографика */
  font-weight: 600;
  text-align: center;
  /* 4. Оформление */
  color: #fff;
  background: #2563eb;
  border-radius: 8px;
}

2. Секции-комментарии и группировка

Внутри файла разделяйте правила на узнаваемые секции. Комментарий должен объяснять причину, а не пересказывать свойство.

/* ==========================================================================
   Карточка товара
   ========================================================================== */
.card { /* ... */ }

/* z-index поднимает бейдж над изображением при наведении */
.card__badge { z-index: 2; }

3. Файловая структура

Когда стилей становится много, один файл делят на несколько по назначению. Типовая раскладка:

Файлы группируются по роли; styles.css собирает их в нужном порядке.

4. Слои каскада: ITCSS и @layer

Чем «ближе к концу» каскада стоит правило, тем оно сильнее (при равной специфичности). Методика ITCSS предлагает выстраивать стили пирамидой — от самых общих и низкоспецифичных правил к самым конкретным. Сверху вниз растёт специфичность, сужается охват:

ITCSS: чем ниже слой, тем он специфичнее и точечнее.

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

/* порядок слоёв объявлен один раз — он и решает приоритет */
@layer reset, base, layout, components, utilities;

@layer components {
  .card { background: #fff; }
}
@layer utilities {
  /* перебьёт .card, даже если объявлено выше и менее специфично */
  .bg-transparent { background: transparent; }
}

⚠️ Проверить по документации: @layer (CSS Cascade Layers) — современная возможность. Поддерживается всеми актуальными браузерами с 2022 года, но при поддержке старых версий сверьтесь с caniuse.com/css-cascade-layers.

Когда что применять

Лендинг/учебный проект: хватит порядка свойств + секций-комментариев в одном файле.
Многостраничный сайт: делите на base/layout/components/utilities.
Командный проект: добавляйте ITCSS/@layer и документируйте договорённости.

Стабильное именование классов (БЭМ) — отдельная большая тема следующего урока 45. Здесь достаточно помнить: имя класса должно описывать компонент, а не его место на странице.

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

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

Урок 44. Теория: Организация CSS: структура, порядок свойств

⚡ Кратко