Classitis

Коротко

Привычка навешивать CSS-классы почти на каждый тег без необходимости, из-за чего разметка разрастается, а стили становится трудно понимать и менять.

Что такое «Classitis»

Название шутливое, по образцу медицинских диагнозов. Оно появилось в начале 2000-х вместе с родственным «дивитисом», когда сторонники веб-стандартов учили отделять смысл страницы от её оформления. Класситис — симптом того, что вёрстку собирают из случайных «наклеек» вместо продуманной структуры.

Как это выглядит

<!-- Класситис -->
<div class="news-block left-col">
  <p class="news-text red bold big mt20">Склад закрыт 1 мая</p>
  <p class="news-text gray small mt10">Отгрузки — со 2 мая</p>
</div>

<!-- Спокойнее -->
<aside class="notice">
  <p><strong>Склад закрыт 1 мая</strong></p>
  <p>Отгрузки — со 2 мая</p>
</aside>

Во втором варианте один осмысленный класс на блок, а внутренние элементы оформляются через селекторы вида .notice p. Классы вроде red или big описывают внешний вид, а не роль: когда дизайнер решит сделать предупреждения синими, класс red начнёт врать.

Чем вредит

  • Разметку трудно читать: смысл теряется среди десятка имён.
  • Изменить оформление можно только правкой HTML во всех шаблонах, а не одного правила в CSS.
  • Копятся мёртвые классы, которые уже ни на что не влияют, но их боятся удалять.
  • Растёт объём страниц и таблиц стилей.

А утилитарные классы — это тоже класситис?

Не совсем. Подход utility-first, например в Tailwind CSS, сознательно строит вёрстку из множества мелких классов вроде flex, p-4, text-sm. Отличие в системе: набор утилитарных классов ограничен, задокументирован и привязан к шкале отступов и цветов проекта, а лишнее вырезается при сборке. Класситис — это хаотичные классы без правил, которые каждый разработчик придумывает заново. Поэтому лечится он не запретом классов, а договорённостью: методология именования вроде БЭМ, компоненты и понятные роли блоков.

Обновлено:

Все термины раздела «Frontend»

Что будем искать? Например,Продвижение