OOCSS, SMACSS и ITCSS

БЭМ — не единственный способ навести порядок. До и после него появились другие подходы, и у каждого своя главная идея. Знать их полезно: в чужом проекте вы узнаете знакомые приёмы, а в своём сможете их сочетать.

OOCSS: структура отдельно от оформления

OOCSS (объектно-ориентированный CSS) предлагает разделять «скелет» компонента и его «кожу». Один класс задаёт раскладку, другой — цвета и рамки, и их можно комбинировать как угодно:

<style>
  .media { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
  .media__image { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: plum; }
 
  .skin-light { padding: 8px; background: whitesmoke; }
  .skin-accent { padding: 8px; background: lavender; border-left: 4px solid rebeccapurple; }
</style>
 
<div class="media skin-light"><div class="media__image"></div>Анна оставила отзыв</div>
<div class="media skin-accent"><div class="media__image"></div>Новое сообщение от Бориса</div>

Объект media — картинка слева, текст справа — один и тот же, а оформление разное. Этот пример заодно показывает, что идеи OOCSS отлично записываются именами по БЭМ.

SMACSS: пять категорий

SMACSS делит все стили на категории и помечает их приставками:

Категория	Что в ней	Пример
Base	стили тегов по умолчанию	`body`, `a`
Layout	крупные области страницы	`.l-header`, `.l-sidebar`
Module	компоненты	`.card`, `.menu`
State	состояния	`.is-active`, `.is-hidden`
Theme	темы оформления	`.theme-dark`

Приставки is- для состояний прижились и в проектах на БЭМ: класс is-open часто ставят скриптом вместо модификатора.

ITCSS: перевёрнутый треугольник

ITCSS описывает, в каком порядке подключать слои стилей: от самых общих и слабых к самым точечным и сильным. Если нарисовать это, получится треугольник остриём вниз:

██████████████  Settings     переменные: цвета, шрифты
 ████████████   Tools        заготовки кода для Sass
  ██████████    Generic      сброс, box-sizing
   ████████     Elements     стили тегов: h1, a
    ██████      Objects      каркасы раскладки: .container
     ████       Components   кнопки, карточки
      ██        Utilities    .hidden, .text-center

Каждый следующий слой затрагивает меньше элементов и стоит ниже, поэтому побеждает предыдущие без усиления селекторов. С каскадными слоями @layer этот порядок можно закрепить прямо в CSS.

Сравнение

Подход	Главная идея	Чем помогает
БЭМ	имена блок, элемент, модификатор	нет конфликтов имён, плоская специфичность
OOCSS	структура отдельно от оформления	меньше повторов
SMACSS	категории и приставки	понятно, где искать правило
ITCSS	порядок слоёв от общего к частному	каскад работает на вас

Подходы не исключают друг друга. Частая связка: файлы разложены по ITCSS, компоненты названы по БЭМ, состояния — классами is-.

Частая ошибка

Смешивать подходы без договорённости: в одном компоненте card__title, в соседнем cardTitle, в третьем card-title. Код становится не лучше, чем совсем без методологии. Выберите правила вместе с командой, запишите их в README проекта и придерживайтесь везде.

Спасибо, что читаете!