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.