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

📁 Раздел: Организация CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#import #layer

⚡ Кратко

Разбор по заданиям: упорядоченное правило .alert (вид не изменился), раскладка «свалки» по файлам с правильным порядком @import и переносимый компонент. Это один из корректных вариантов.

Задание 2. Порядок свойств

Результат идентичен исходному — переставлены только строки.

⚠️ Ошибка валидации
.alert {
  /* блочная модель */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  /* типографика */
  font-weight: 600;
  /* оформление */
  color: #7f1d1d;
  background: #fee2e2;
  border-radius: 8px;
}

Задание 3. Файловая структура

Каждое правило уходит в файл по своей роли, главный файл собирает их в порядке каскада.

📄 base/reset.css
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
📄 components/button.css
.btn { padding: 10px 16px; background: #2563eb; color: #fff; }
📄 utilities/spacing.css
.mt-4 { margin-top: 16px; }
📄 styles.css
@import "base/reset.css";        /* сначала база */
@import "components/button.css"; /* затем компоненты */
@import "utilities/spacing.css"; /* утилиты в конце — могут перебить */

Задание 4. Переносимый компонент

Имя описывает роль, а не место; компонент не зависит от родителя.

Team

Компонент из components/pricing-card.css

📄 components/pricing-card.css
/* было: .sidebar .card { ... } — зависит от родителя */
/* стало: автономный компонент */
.pricing-card {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 24rem);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

Навигация