RSCSS is an interesting new methodology

RSCSS is an interesting new methodology
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

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:

Componet 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:


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.


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

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

    Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
    Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
    Kharkiv Otakara Yarosha 22, 61000, Kharkiv, Ukraine
    Email [email protected]