Skip to content
ArtemSapegin

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>

#Mixins

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

.scrollable
a.fake

#States

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

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

#JS-hooks

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

.js-files
.js-select
.js-item

#Wrappers

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

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

#Caveats

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

#Other methodologies