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
- Preferred classes order in HTML: blocks, mixins, JS-hooks, states:
<div class="upload-files scrollable js-files is-hidden"></div>