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

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

⚡ Кратко

Топ-ошибки: селектор зависит от места на странице (ломается при переносе), глубокая вложенность, имена по виду (.big-blue), отсутствие командного соглашения и «оверинжиниринг» структуры в крошечном проекте.

Частые ошибки

1. Контекст важнее компонента

Селектор привязан к месту на странице. Перенесли карточку в другой контейнер — стили отвалились.

Вне .sidebar правило .sidebar .card не сработает — карточка «голая». 
/* ломается при переносе */
.sidebar .card { background: #fff; border-radius: 12px; }
/* автономный компонент работает где угодно */
.card { background: #fff; border-radius: 12px; }

2. Слишком много вложенности

Чем длиннее селектор, тем выше специфичность и тем труднее его потом переопределить.

/* плохо: специфичность зашкаливает */
.page .content .card .header .title { color: #111; }
/* лучше */
.card__title { color: #111; }

3. Имена по внешнему виду

.big-blue станет ложью, как только дизайн поменяет цвет. Имя должно описывать роль.

/* плохо */ .big-blue { color: blue; font-size: 32px; }
/* лучше */ .hero__title { color: var(--color-accent); font-size: 2rem; }

4. Нет командного соглашения

Без единого порядка свойств и правил именования каждый пишет по-своему — CSS становится непредсказуемым. Зафиксируйте договорённости в README.

5. Оверинжиниринг

Обратная крайность: ITCSS, @layer и десять папок в проекте на пять компонентов. Структура должна расти вслед за проектом, а не опережать его.

Навигация