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

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

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

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

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

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

.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">

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

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

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

Артём Сапегин

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

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