Коротка відповідь
middleBEM — це методологія, що розділяє стилі за блоками, елементами та модифікаторами: `.block__elem--modifier`. OOCSS орієнтується на об’єктно‑орієнтовану структуру, розділяючи контейнер і контент: `.container {}` та `.content {}`. SMACSS пропонує категорії стилів (base, layout, module, state, theme) для гнучкого масштабування.
Повне пояснення
Що це і навіщо.
- BEM (Block‑Element‑Modifier): підхід до іменування CSS‑класів, що забезпечує модульність та повторне використання.
- OOCSS (Object‑Oriented CSS): розділення стилів на об’єкти, що дозволяє створювати незалежні компоненти.
- SMACSS (Scalable and Modular Architecture for CSS): гнучка система категорій, що допомагає організувати великі проекти.
Ключові принципи.
- BEM:
block__element--modifier→ чітка ієрархія, уникнення колізій. - OOCSS: розділення «контейнера» і «вмісту», мінімізація дублювання.
- SMACSS: базові стилі, макети, модулі, стани, теми → масштабованість.
Як це працює.
- У BEM кожен клас відповідає конкретному елементу, що полегшує читання і підтримку.
- OOCSS створює «об’єкти» (наприклад,
.card,.grid), які можна комбінувати без зміни внутрішньої логіки. - SMACSS дозволяє розподілити стилі за категоріями, що зменшує конфлікти і полегшує рефакторинг.
Практика.
- BEM:
<div class="menu__item--active">. - OOCSS:
.card { display:flex; } .card__header {}. - SMACSS:
.layout-header,.module-button,.state-disabled.
Тестування.
- Перевірка наявності колізій класів за допомогою lint‑інструментів (stylelint).
- Unit‑тести компонентів у React, що використовують BEM/SMACSS.
Оптимізація.
- Уникайте надмірної глибини вкладеності, що підвищує час рендеру.
- Використовуйте CSS‑модулі або
styled-componentsдля локалізації стилів.
Accessibility.
- Дотримання семантики:
<nav>,<header>замість загальнихdiv. - ARIA‑атрибути для станів (наприклад,
aria-expanded).
Безпека.
- Уникайте ін’єкцій через
styleатрибути; використовуйте CSS‑перемінні.
Типові помилки.
- Перевантаження класів у BEM → збільшує розмір CSS.
- Відсутність об’єктної структури у OOCSS → дублювання стилів.
Cheatsheet.
- BEM:
block__elem--modifier. - OOCSS:
.object {}+.object__part {}. - SMACSS:
base,layout,module,state,theme.
Follow‑up питання.
- Як обрати між BEM і SMACSS для великого проекту?
- Які інструменти допомагають підтримувати консистентність у стилях?