Some time ago I found an addition to BEM that can be the best choice if you need to build a small project with no complicated structure, no huge classnames and 5 levels of child branches. I am talking about RSCSS (Reasonable System for CSS Stylesheet Structure) – the system that follows all BEM instructions, but reduces the size of the structure by making classnames much shorter. RSCSS has several main principles:
- Think in components, named with 2 words (.photo-card).
- Components have elements, named with 1 word (.photo-card > .title).
- Name variants with a dash prefix (.photo-card -with-shadow).
- Components can nest
For example:
On the screenshot you can see that the searchfied is a component.
If we use BEM principles, the CSS structure would look like this:
.search-form .search-form__field .search-form__button
It looks pretty simple, but in fact it occupies a lot of space. RSCSS can help us make the code more compact without changing the component’s idea.
.search-form >.field >.button
As a result we have a code which is almost half shorter. Still, you should remember that in case of big projects this approach can cause difficulties. For example,regarding the fact that you’ll have a lot of same classnames, it can be hard to find the string you need to work with.
You can check out all the details here http://rscss.io/
