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

Особенность темы: результат рендера почти не меняется — меняется структура кода. Поэтому слева вы видите один и тот же компонент, а в коде сравниваете беспорядок с порядком.

1. Беспорядок → порядок свойств

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

/* было: всё вперемешку */
.badge {
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  background: #0f766e;
  padding: 4px 12px;
  gap: 6px;
  font-weight: 600;
  align-items: center;
  font-size: .85rem;
}

/* стало: по группам */
.badge {
  /* блочная модель */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  /* типографика */
  font-weight: 600;
  font-size: .85rem;
  /* оформление */
  color: #fff;
  background: #0f766e;
  border-radius: 999px;
}

2. Секции-комментарии

Шапка карточки. Комментарии-разделители показывают границы блоков, а строчный комментарий объясняет зачем нужен z-index.

/* ==========================================================================
   Карточка тарифа
   ========================================================================== */
.card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }

/* --- Шапка с градиентом --- */
.card__cover { position: relative; height: 70px; }

/* z-index держит бейдж поверх обложки */
.card__badge { position: absolute; top: 8px; right: 8px; z-index: 1; }

3. Файловая структура через @import

Тот же набор стилей, разнесённый по файлам. Главный файл лишь собирает слои в правильном порядке — он же определяет порядок каскада.

/* порядок @import = порядок каскада */
@import "base/reset.css";
@import "layout/grid.css";
@import "components/card.css";
@import "utilities/spacing.css";   /* utilities в конце — перебивают остальное */

4. Каскадные слои @layer

То же приложение, но приоритет задан явно через @layer. Утилита перебивает компонент, хотя объявлена и менее специфична — это и видно на превью.

@layer components, utilities;   /* utilities сильнее */

@layer components {
  .card { background: #8250df; color: #fff; }
}
@layer utilities {
  .bg-transparent { background: transparent; }   /* победит */
}

5. Утилитарные классы (utility-first)

Повторяемые мелкие классы избавляют от десятков почти одинаковых правил. Здесь отступ и выравнивание заданы утилитами прямо в разметке.

.flex      { display: flex; }
.justify-center { justify-content: center; }
.pt-4      { padding-top: 16px; }

<div class="flex justify-center pt-4">
  <button>Кнопка</button>
</div>