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
- 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).
- To use semantic classless tags in user-generated content (articles, comments, etc.).
- (Very rarely) when you are sure you will never put nested block with the same tag.
Kind of OOCSS. It’s a normal block but intended to extend another (primary) block, to add some look or behavior.