Artem Sapegin

My frontend methodology: OPOR (One Page of Rules), or BEM for small sites

I like BEM. But I’m not Yandex, Google or any other huge company that builds all the internet so I found BEM is too strict for me.

The point of OPOR (One Page of Rules) is that all rules and recommendations are contained on a single page. It combines best parts of BEM, SMACSS and OOCSS. It’s not a religion and it’s suitable for any small to medium project.

CSS classes names

Almost the same style as in BEM. Blocks are .block, elements are .block__elem, but modifiers are .block_modifier instead of .block_property_value.

Cascade usage

Allowed for:

  • To define context. E. g. block should look differently on light and dark backgrounds: it can be achieved by using a modifier or using a cascade (adding context class to body tag or to parent block).
.logo {
  color: saddlebrown;
.page_about .logo {
  color: ghostwhite;
  • To use semantic classless tags in user-generated content (articles, comments, etc.).
.text ul {}
.text p {}
  • (Very rarely) when you are sure you will never put nested block with the same tag.
.social-button i { /* Icon */ }
<div class="social-button"><i></i></div>


Kind of OOCSS. It’s a normal block but intended to extend another (primary) block, to add some look or behavior.

<!  — - prettier-ignore ->>



It’s like modifier but you can use it with any block or element. Very useful in JavaScript.

<!  — - prettier-ignore ->>



You shouldn’t use CSS classes used to style content to select elements in JavaScript. (Except states.)

<!  — - prettier-ignore ->>



Don’t imply any semantics, use it for appearance only.

<div class="header">
  <div class="header-i"></div>


  1. Preferred classes order in HTML: blocks, mixins, JS-hooks, states:
<div class="upload-files scrollable js-files is-hidden"></div>

Other methodologies