Архитектура CSS: ITCSS, SMACSS

ITCSS и SMACSS — методологии организации CSS-кода по слоям специфичности и ответственности, которые помогают избежать конфликтов стилей и каскадного хаоса в больших проектах.

Зачем нужно

Без системы CSS в крупном проекте неизбежно превращается в «специфичность-войну»: чтобы переопределить стиль, добавляют всё больше классов или !important. Архитектурные подходы задают порядок, при котором стили читаемы, предсказуемы и масштабируемы.

Где используется

  • Командные проекты с несколькими разработчиками
  • Дизайн-системы и UI-библиотеки
  • Крупные сайты с сотнями компонентов
  • Проекты с долгим сроком поддержки

ITCSS (Inverted Triangle CSS)

Организует CSS в слои от общего к конкретному — как перевёрнутый треугольник. Специфичность растёт сверху вниз.

/* 1. Settings — переменные, токены */
:root {
  --color-primary: #007bff;
  --font-base: 16px;
}

/* 2. Tools — миксины, функции (только если есть препроцессор) */

/* 3. Generic — сброс стилей, box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 4. Elements — базовые HTML-теги без классов */
body { font-family: sans-serif; }
a { color: var(--color-primary); }

/* 5. Objects — паттерны раскладки без визуального оформления */
.container { max-width: 1200px; margin: 0 auto; }

/* 6. Components — UI-компоненты */
.btn { padding: 8px 16px; background: var(--color-primary); }

/* 7. Utilities — атомарные хелперы с !important */
.u-hidden { display: none !important; }
.u-mt-16 { margin-top: 16px !important; }

SMACSS (Scalable and Modular Architecture for CSS)

Делит CSS на 5 категорий:

/* 1. Base — базовые стили тегов (нет классов) */
h1, h2, h3 { font-weight: 700; }

/* 2. Layout (l-) — крупные секции страницы */
.l-header { position: sticky; top: 0; }
.l-sidebar { width: 280px; }

/* 3. Module — переиспользуемые компоненты */
.card { border-radius: 8px; padding: 16px; }
.card-title { font-size: 1.25rem; }

/* 4. State (is-, has-) — состояния */
.is-active { background: var(--color-primary); }
.is-hidden { display: none; }

/* 5. Theme — визуальные темы */
.theme-dark { background: #1a1a1a; color: #fff; }

Сравнение

ITCSS SMACSS
Принцип Специфичность: общее → конкретное Категории по назначению
Структура 7 слоёв 5 категорий
Лучше для Дизайн-систем, препроцессоры Средние проекты, без препроцессора

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

  1. Игнорирование порядка слоёв — ITCSS работает только при соблюдении порядка импорта; компоненты до дженериков сломают каскад.
  2. Слишком подробные утилиты — утилиты в ITCSS должны быть минимальными точечными переопределениями, а не полноценными компонентами.
  3. Смешивание методологий произвольно — выберите одну за основу; хаотичное смешение ITCSS + SMACSS + BEM без системы хуже, чем любая одна методология.

Связанные темы

Ресурсы