Правильное именование классов в CSS — это фундамент поддерживаемого и масштабируемого кода. В этой статье мы разберём три популярных методологии: BEM, OOCSS и SMACSS, которые помогут вам создавать чистый и организованный CSS.
1. BEM (Block, Element, Modifier)
БЭМ — это строгая методология именования, разработанная в Яндексе, которая создаёт чёткую структуру CSS-селекторов.
Основные принципы:
- Блок (Block): Независимый компонент (
.header,.menu) - Элемент (Element): Часть блока (
.menu__item) - Модификатор (Modifier): Вариант или состояние (
.menu__item--active)
<!-- HTML -->
<div class="card card--featured">
<img class="card__image" src="...">
<h3 class="card__title">Заголовок</h3>
<p class="card__description">Описание...</p>
</div>
<!-- CSS -->
<style>
.card { /* стили блока */ }
.card__image { /* стили элемента */ }
.card--featured { /* модификатор */ }
</style>
Преимущества:
- Чёткая структура и связь элементов
- Минимизация конфликтов имён
- Высокая читаемость кода
Недостатки:
- Длинные имена классов
- Жёсткая структура
- Избыточность для простых проектов
2. OOCSS (Object-Oriented CSS)
Объектно-ориентированный CSS фокусируется на создании повторно используемых компонентов и разделении структуры от оформления.
Основные принципы:
- Разделение структуры и оформления
- Создание повторно используемых объектов
- Использование классов-помощников
<!-- HTML -->
<div class="media-box rounded shadow">
<img class="media-box__image" src="...">
<div class="media-box__content">...</div>
</div>
<!-- CSS -->
<style>
.media-box { /* базовая структура */ }
.media-box__image { /* специфичные стили */ }
.rounded { border-radius: 4px; } /* класс-помощник */
.shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
Преимущества:
- Высокая повторная используемость
- Меньший объём CSS
- Гибкость и модульность
Недостатки:
- Может привести к "классовому взрыву"
- Требует дисциплины при именовании
- Менее явная связь между элементами
3. SMACSS (Scalable and Modular Architecture for CSS)
SMACSS — это скорее набор руководств, чем строгая методология, фокусирующаяся на категоризации CSS-правил.
Категории стилей:
- Base: Базовые стили тегов (
body,h1) - Layout: Основные структурные компоненты (
.l-header) - Module: Независимые компоненты (
.product-card) - State: Состояния (
.is-hidden,.is-active) - Theme: Темы оформления
<!-- HTML -->
<div class="l-container">
<header class="l-header">
<nav class="nav-main is-expanded">...</nav>
</header>
</div>
<!-- CSS -->
<style>
.l-header { /* layout стили */ }
.nav-main { /* module стили */ }
.is-expanded { /* state стили */ }
</style>
Преимущества:
- Гибкий и адаптируемый подход
- Хорошая масштабируемость
- Чёткое разделение ответственности
Недостатки:
- Менее строгие правила именования
- Требует хорошего понимания архитектуры
- Может сочетаться с другими методологиями
Как выбрать методологию?
Выбор зависит от масштаба проекта и предпочтений команды:
- Крупные проекты: BEM обеспечит строгую структуру
- Проекты с множеством повторяющихся компонентов: OOCSS повысит переиспользуемость
- Гибкие и evolving-проекты: SMACSS предоставит необходимую свободу
