Ответ
- БЭМ (Блок-Элемент-Модификатор) — методология для создания переиспользуемых компонентов. Блок — независимый компонент, Элемент — часть блока, Модификатор — вариация блока/элемента.
Пример:
<div class="menu">
<button class="menu__item menu__item--active">Home</button>
</div>
-
SMACSS (Scalable Modular Architecture CSS) — разделение стилей на категории: Base, Layout, Module, State, Theme. Упрощает поддержку больших проектов.
-
OOCSS (Object-Oriented CSS) — разделение структуры и оформления. Пример:
<div class="box rounded"></div>
Где `.box` — структура, `.rounded` — оформление.
-
Atomic CSS — стилизация через атомарные классы (например,
margin-10). Подходит для быстрой разработки, но усложняет читаемость. -
ITCSS (Inverted Triangle CSS) — слоистая структура стилей (от общих к частным): Settings, Tools, Generic, Elements, Objects, Components, Utilities.
Выбор зависит от масштаба проекта и предпочтений команды.