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>