Reasonable System for CSS
As a primary rule RSCSS treats everything as a separate parent components, which will govern the internal elements from the child selector.
RSCSS is a guideline in keeping the CSS well-organized, scalable and most of all maintainable.
RSCSS attempts to divide the overall user interface into reusable components. A component is a standalone entity that is meaningful on its own and described by two-word name. An element is a part of a component and have no standalone meaning and described by one-word name . A variant is a modifier of a component or an element, change of appearance, behavior or state and described by one-word name with a hyphen prefix.
Introduction
RSCSS is a guideline in keeping the CSS:
- well-organized,
- scalable and most of all,
- maintainable.
RSCSS attempts to divide the overall user interface into reusable components.
A component is a standalone entity that is meaningful on its own and described by preferably two-word name, like component-item.
An element is a part of a component and have no standalone meaning and described by one-word name, like image or button.
A variant is a modifier of a component or an element, a change of appearance, behavior or a state and described by one-word name with a hyphen prefix, like -active.
Asmentioned above, when working with RSCSS you should think in components. Each piece of UI should be viewed as an individual component.
However, it is very important to draw precise lines between components, like, the parent and the child. Everything boils down to seeing component as single-purposed entity that does one thing, and one thing only.
Use the UI Elements list to support your decision if needed.
General rules
- Use the
SCSSsyntax exlusively, - Components should be saved as their own files. (eg.
css/components/feature-card.scss), - Using
tagandidselectors while writing your CSS should be avoided, - Avoid making components deeper than 3 levels,
- Components ca be inside other components. In such case add variants to a nested component, placing the variant inside the component it is adhering to and not to the parent.
RSCSS can be visualized by this piece of SCSS syntax:
.component-item > .elements & .-variants
Component
A component is the container containing all the elements of the UI. Its class name should have at least two words, using hyphen in-between.
Consider these examples:
.feature-card .nav-menu .search-bar .input-field
Element
Each component contains elements. Classes should have only one word, In case the element has to be multiple words, combine it without using spaces or dashes. Like this:
.feature-card > .image > .title > .desc > .button
In SCSS syntax elements are selected with the child combinator (>).
Variant
Variants are the modifiers of your component or elements. They are usually used to change the look and behaviour of the component or element. Variants are prefixed with dashes (–) for easy identification. Like this:
.feature-card &.-active &.-disabled &.-highlight
RSCSS in Design
How does RSCSS translate in design work? Well similarly to BEM, through naming layers and object the right way including usage of the right punctuation marks (dashes).
When creating a button with a UI design tool, give button’s layer a name like button-primary or button-primary-md.
When creating a design token for a color of a particular button, name it tkns-headings-font-family or when creating a variable, name it $hover-primary-text.
So in the end there is not much of a difference between RSCSS in BEM in design realm, yet RSCSS seems to be more reasonable on naming piece of UI.
Learn more
This is how RSCSS naming convention pretty much works. If you’d like to explore more technical matters, you can read all about them here.
Other systems
No one is always right
I use feedback to improve UI Crux Platform. If you noticed a mistake, please report it.
