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

Other methodologies

Links

You can improve this post by editing it on GitHub.

About me

I’m a frontend developer living in Berlin, Germany. I work at Here, and in my spare time I love making photos, writing, hanging out with my dogs and drinking lots of coffee.

Check out my projects, follow me on Twitter or ask me anything.