Advantages over SuitCSS and SMACSS? about rscss

[rstacruz]

Suitcss is a full suite including a preprocessor. rscss is something you can apply to any css pre/post-processor.

Compared to BEM/suitcss, rscss is MUCH less verbose to write and maintain. The con, though, is that rscss recommends .my-component > .element child selectors, which others may feel restricted with.

Smacss is great. In fact it's not mutually-exclusive with rscss, you can use ideas from both books together. You may even consider either book as a complement to the other's ideas.

I'd love to do a full chapter on all these, but I haven't been able to try either for enough time to say something insightful on the matter.

[workjalexanderfox]

Thanks for the quick reply!

With regard to suitcss, I was mainly referring to the naming conventions and not the preprocessor:
https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
Though I think you addressed that with your comparison.

I agree it is more verbose but with preprocessors/postprocessors you can always do (ie. postcss):

.MyComponent {
    &-element { }
}

which becomes .MyComponent-element { }

The biggest concern I see with .my-component > .element is when someone/thing accidentally or on purpose does .my-other-component .element and the side effects when you have this structure in html:

<div class="my-other-component">
   <div class="my-component">
     <div class="element"></div>
   </div>
</div>

Also, rscss approach seems to require the maintainer to know the hierarchy/dom parent-child relationship where other naming conventions do not ie:

rscss:

.my-component > .element > .another-element

.another-element has to be a child of .element and has to be child of .my-component, if the html structure changes, so must the selectors.

conversely in SuitCSS naming:

.MyComponent {
    &-element {}
    &-anotherElement {}
}

.MyComponent-element and .MyComponent-anotherElement can be anywhere in the dom.

And then, of course, there is CSS Modules that automate css naming.

Though I know I'm perfectly capable of following rscss conventions without conflict and they are certainly less verbose in the html, I wonder if people with less experience with css and how child & descendant selectors work or simply have to refactor their html may run into bugs because of the hierarchy based selectors.

Thanks again!