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

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

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

Почти как в БЭМе: блоки (.block), элементы (.block__elem), модификаторы (.block_mod). Но модификаторы не в формате _property_value, а просто _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">

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

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

Вы можете улучшить этот пост, отредактировав его на Гитхабе.

Обо мне

Я живу в Берлине и работаю фронтенд-разработчиком в Хире, а в свободное время фотографирую, пишу, глажу своих собак и пью кофе.

Читайте обо мне на моём сайте и подпишитесь на мой блог о фотографии и твитер.