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

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

⚡ Кратко

Старый CSS: хаотичный порядок свойств, дублированные правила, имена по внешнему виду (.big-blue), всё в одном файле. Новый: единый порядок, имена по смыслу, разбивка на файлы и слои. Результат тот же — поддержка несравнимо легче.

Карточка выглядит одинаково в обоих вариантах. Разница — только в коде: насколько его легко читать, переносить и менять.

Старый подход

Свойства вперемешку, правило .card объявлено дважды, имя .big-blue описывает вид (а если завтра цвет станет зелёным?). Всё свалено в один файл.

Заголовок
📄 styles.css (всё в одном)
.card { color: #111; position: relative; border-radius: 8px; display: grid; margin: 16px; background: white; }
.big-blue { color: blue; font-size: 32px; }   /* имя по виду */
/* width */
.card { width: 300px; }   /* дубль .card */

Современный подход

Свойства сгруппированы, правило одно, имена описывают роль (.card__title), компонент вынесен в свой файл и не зависит от родителя.

Заголовок
📄 components/card.css
.card {
  /* позиционирование */
  position: relative;
  /* блочная модель */
  display: grid;
  gap: var(--space-4);
  width: min(100%, 24rem);
  /* оформление */
  background: var(--color-surface);
  border-radius: var(--radius-card);
}
.card__title { color: var(--color-accent); font-size: 1.5rem; font-weight: 700; }
Имя .card__title в стиле БЭМ — намёк на следующий урок 45, где разбираем именование подробно.

Навигация