RSCSS is an interesting new methodology

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

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:

.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/

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111