rscss: the pattern I was already using

Discovering a methodology that names something you've been doing instinctively for years creates a strange feeling. Part validation, part annoyance that you did not find it sooner. That was my reaction when I came across rscss, through a LinkedIn post shared by Lionel Péramo.

What rscss actually is

rscss (Reasonable System for CSS Stylesheet Structure), created by Rico Sta. Cruz, has a simple core: organise CSS around components, elements, and variants. No elaborate naming systems. No excessive ceremony. No utility overload.

Components are named with two or more words, separated by a hyphen:

.search-form { }
.article-card { }
.site-header  { }

Elements, the things inside a component, use single-word class names and are selected as direct children:

.search-form > .field   { }
.search-form > .submit  { }
.article-card > .title  { }

Variants modify a component or element and are prefixed with a dash:

.search-form.-wide    { }
.article-card.-featured { }

The recognition

Reading the rscss docs felt immediately familiar. The component-first structure matched how I already think. Single-word element classes felt natural. Even the variant pattern aligned with what I was already trying to do in practice.

The key shift was the structural constraint. Selecting elements as > .direct-children pushes components towards shallower trees and keeps selectors easier to trace back to markup. It limits the slow nesting creep that makes styles harder to reason about later.

I've usually treated BEM as a naming convention, and many projects I joined already reflected that approach. But reading about RSCSS made me realise it more closely matched what I was actually implementing.

Both are tools. Neither is theology.

The value of naming things

The main lesson is not about choosing a winner between rscss and BEM. It is about what changes when you can name your approach.

Before I found rscss, I had habits: prefer shorter selectors, keep nesting shallow, group by component. Those habits were tacit. They lived in muscle memory rather than in language I could share clearly. Naming the approach gave me a way to explain it, teach it, and defend it in review.

It also improved the habits themselves. Some held up. A few did not. That's one of the most useful effects of any named methodology: it gives you a mirror.

If you're already writing CSS that looks roughly like this, read the rscss documentation. It takes twenty minutes and often gives clearer language to patterns you've been using for years.