Микрометодология вёрстки OPOR

Суть недометодологии в том, что все правила и рекомендации настолько просты, что умещаются на одной странице. Поэтому она называется OPOR (One Page of Rules). Совмещает лучшие черты БЭМа, SMACSS, OOCSS. Не религиозна. Подходит для небольших проектов.

Именование классов основных блоков

Почти как в БЭМе: блоки (.block), элементы (.block__elem), модификаторы (.block_mod). Но модификаторы не в формате _propertyvalue, а просто \something.

Использование каскада

Возможно в следующих случаях:

— Для задания контекста. Например, блок по-разному выглядит на тёмном и светлом фоне — это можно сделать как модификатором, так и каскадом (задавая класс-контекст body или родительскому блоку).

.logo {
  color:saddlebrown;
  }
.page_about .logo {
  color:ghostwhite;
  }

— Для семантических тегов в пользовательском контенте (статьи, комментарии).

.text ul {}
.text p {}

— (Иногда) когда есть уверенность, что в блок не будет вложен другой блок с таким же тегом.

.social-button i {}
<div class="social-button"><i></i></div>

Примеси

Что-то вроде OOCSS. Наделяют блоки или элементы какими-то свойствами или оформлением. Примеси можно добавлять как в HTML, там и с помощью CSS-препроцессора.

.scrollable
a.fake

Состояния

В отличии от модификаторов, могут применяться к любым блокам. Это особенно удобно в скриптах.

.is-expanded
.is-visible
.is-highlighted

JS-хуки

Поиск элементов из скриптов должен осуществляться только по таким классам, а не по вёрсточным.

.js-files
.js-select

Обёртки

Не несут никакой семантики, используются для оформления.

.header
  .header-i

Замечания

1. Классы перечисляются в таком порядке: блоки, примеси, JS-хуки, состояния:

<div class="upload-files scrollable js-files is-hidden"></div>

Другие методологии

— БЭМ — SMACSS — OOCSS — MCSS

Полезные ссылки

— About HTML semantics and frontend architecture — Code smells in CSS (перевод) — Pragmatic, practical font sizing in CSS — Single-direction margin declarations — The media object saves hundreds of lines of code — Мой Stylus-бутстрап — основа для всех проектов