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. Отличие в системе: набор утилитарных классов ограничен, задокументирован и привязан к шкале отступов и цветов проекта, а лишнее вырезается при сборке. Класситис — это хаотичные классы без правил, которые каждый разработчик придумывает заново. Поэтому лечится он не запретом классов, а договорённостью: методология именования вроде БЭМ, компоненты и понятные роли блоков.

