RSCSS — Styling your CSS without losing your sanity .
Introduction
Hello,
Many people judge CSS as complicated, well, until it may seem, but in really it doesn’t have to be this way . Who ever asked himself .. What does this class mean? .. Is this class being used? .. If I make an X class, will it conflict?, the css brings many questions in your development . So i want show none library, framework, or until one mediation technique to you writing css without losing your sanity, i’ll simply show a css methodology that i think very cool to implement in your frontend projects, not only to improve css concepts but to improve your code, your project design with S.O.L.I.D concepts more clearly and it helps your project to develop in a more scaleable way .
This is my first post, and in english, so patience please with language and coerence problems, rsrs, but so, this post is based in my talk in STROGA ( STANT + ROGA companies) and i am writing listening a brazilian band called Ponto Nulo no Céu, in my posts i like share music in view of my great musical passion and the responsibility to disseminate more music around the world. My slides from this talk will be at the end of the post
Why use methodologies with CSS ?
The CSS can seem complicated, especially when you write anyway. But it does not have to be this way. If you create a writing pattern that can be passed on to others on the team and you understand how it works, everything else becomes very simple.
There are many other CSS methodologies that have been created and have been using over the years to create patterns and streamline our CSS development process, but is the point or points that they solve . Basically these methodologies, try “ avoid ” global styles and easily reuse of the styles and code . So, the approach you choose is that it will make you prone to having a very complicated CSS or not .
Writing CSS
PRE-PROCESSORS
The pre-processors help us a lot back there. The problem is that just as pre-processors help us, they can us disturbing enough .
In examples we can observe several problems that can easily go unnoticed, how :
- Over-nesting is a common problem
- Bad Lecture
- Bad code generated
- Direct tags generate problem
- No semantics
Thinking about the example of a card, using this kind of nesting approach, we would end up creating something like this:
Trying Improve ..
Okay, we managed to minimize several of the problems but we have a bad side-effect, the VERY DIRTY HTML .
If we have the clean markup, putting only base classes and using nesting, we end up having a css dirty and hard to read. But if we write a more organized CSS, having classes for each element, we end up having a dirty html and we do not want our end user to download larger files, right ?!
What if there was a way to keep the two clean?
That’s how RSCSS was born !
RSCSS — Reasonable System for CSS Stylesheet Structure
So, today we see enough news about how to develop a website or application, we have concepts, frameworks, libs like, SPA’s, React, AngularJS, VueJS, PWA .. And all these guys basically try to center all your development on COMPONENTS .
This is the first premise of the RSCSS, consider each piece of your interface as an individual component.
In the previous example of the card component with RSCSS
Looking at the child selector one sees the main idea of RSCSS which is to create a parent component, which will govern the internal elements from the child selector “>”, also called child selector or descendant. To know more selector, i recommend read this post, to learning some selectors .
Working with RSCSS
I thought in writing more about how to use RSCSS, but there is already a great and beautiful RSCSS documentation and another complete guide post from Willian Justen about the methodology , besides other objective references that i I based it on my talk. Then follow below the link of both to know everything.
- http://rscss.io/
- https://willianjusten.com.br/falando-sobre-rscss/
- https://medium.com/@mik01aj/rscss-77043f4fafb1
- https://webdesign.tutsplus.com/courses/structuring-stylesheets-with-rscss
- https://codepen.io/willianjusten/pen/gPBJWq
- Meetup Video : Rico St. Cruz — RSCSS ( MelbCSS )
Stylelint RSCSS
If you like RSCSS conventions and want implement into your project, exist a stylelinter very cool to implement in your projects and you help you to implement a methodology and ensure your conventions .
Conclusion
I liked very much the RSCSS approach and your mindset, ends up changing a lot not only in styling but also in the way of scaling components and making them powerful, implementing your need think change your mindset with components and elements, which can become confusing but with practice you should get . Other point is that the RSCSS not define all, some points like the architecture for example you will have to adapt during the course of the project, always remembering, to define it sometime .
So it’s important that you always define a approach to your project, independent if you use RSCSS or other methodology, define a approach coherent and that avoid common css problems with your team at the beginning of the project a very important to develop a project without many supernatural or side-effect problems, repeating, “ the approach you choose is that it will make you prone to having a very complicated CSS or not ”, this will make you styling your CSS without losing your sanity .
Thank You and Let’s Stylize . \õ”
