Thinking of a beautiful and grammatically correct CSS code over and over again but still wiped out with the methodology? Decided to use RSCSS but don’t know how to start?
Then this article is just for you. We will not go through the theory but move on to practice right away.
What we will use?
Components
In RSCSS you should think of UI like small parts, breaking it into several smaller pieces, which are the components. These components must have a class of two or more words separated by a dash -. For example ‘my-component’.
Elements
Hence come the elements within your component, the children. These should have only one word. For example, element. If you need more than one word, put it all together as one.
A first selection insight becomes convenient now. It’s preferable to use the child selector > to refer to the elements. In addition to being more performative, they are less likely to have side effects.
Oh, I do not even have to tell you to always give preference to the classes rather than the tags in your selections, do I?
Let's start
For example, we take the prepared HTML code:
and CSS:
As you can see, this class naming doesn’t go by the RSCSS recommendation about components and elements structure.
Improve naming
Let’s rename some elements then:
vacation-list-item =>item
vacation-card-image => image
vacation-card-info => card-info
vacation-card-eyebrow => eyebrow
vacation-card-title => title
vacation-card-price => price
and vacation-card-info__orange => -orange
It’s much better now.
Clean up the style
We will use the child selector > to reference the elements. Don’t forget to add spaces between selectors.
Done!
After light improvements are done, we got a very nice and clear code which follows the RSCSS methodology.
Structure
The only advice here is to try to insert only one component per file. Other than that, no rigor related to the structure.
Here is the full practical example of applying the methodology:
Final considerations
As you see, its superficial example of the methodology premises and ways how to visualize it. If you find it interesting, you can go deeper into Willian Justen’s articles or even official documentation.
So that you have a foundation to decide whether it’s worth studying and adopting in your day-to-day programming life.
Good luck to everyone!
**Andriy Parashchuk **is a Software Engineer at JetThoughts. Follow him on LinkedIn or GitHub.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories.
Top comments (0)