По мере роста проектов обычный CSS страдает от глобальной области видимости — каждый селектор конкурирует глобально, возникают войны специфичности, и никто не решается удалить правило. Методологии устанавливают структуру и соглашения об именовании, чтобы поддерживать CSS управляемым.
Соглашение об именовании, которое делает отношения явными и поддерживает плоскую специфичность (все одиночные классы):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Ценность BEM: имена классов самодокументирующиеся, область видимости по соглашению, и равномерно низкая специфичность (без войн вложения/id).
Компонуйте стили из крошечных одноцелевых классов прямо в разметку:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Преимущества: без именования, без неиспользуемого CSS (очищен), согласованные токены дизайна. Недостатки: многословный HTML. Чрезвычайно популярен благодаря скорости и согласованности.
Современный подход в фреймворках компонентов — ограничьте область видимости стилей компонентом, чтобы они не могли утечь:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Это решает проблему глобальной области видимости механически, а не по соглашению.
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
Все они борются с одними и теми же врагами: ползучей специфичностью, столкновениями имен, мертвым кодом и непредсказуемыми каскадами. Будь то через именование (BEM), утилиты (Tailwind) или область видимости (Modules), они держат CSS предсказуемым и безопасным для изменения в масштабе.
Большие базы кода CSS рушатся под давлением глобальной области видимости и войн специфичности без дисциплины.
Выбор и последовательное применение методологии (обычно BEM, Tailwind или scoped CSS Modules сегодня) — это то, что сохраняет стили модульными, удаляемыми и свободными от конфликтов по мере роста команды и базы кода.