How to style with styled-components

In this article I want to focus, according to the above quote, on a second hard thing: naming things and I show you how styled-components library can help with that.

All Frontend developers have to deal with styles during some period of their work. Some of us love it others hate it.

There is nothing wrong with not using styled-components in your React project, unless you are not following any CSS naming convention. Try to imagine a project with 10 developers making styles without any rules. Probably you will end up with CSS mess. Why? Every developer started the CSS in his/her way and there is no consistent pattern to write CSS and this caused a big issue because of their effect on the specificity of the elements and the developers had to override styles using !important to display the UI Element as they need but !important does not fix your bad CSS. Another way to override style rules is by adding a stronger nested class or using some fancy CSS selector.

In the end, you will have a lot of classes which aren't:

• descriptive
• reusable
• readable

How to be able to maintain and keep CSS in a good shape? You should know:

1. CSS naming conventions - the ability to name your classes in the right way
2. SASS with its superpowers - it supports the CSS naming conventions

If you have a problem with maintaining CSS and you look every day on spaghetti CSS and think: how did I end up like this? How can I fix that? My suggestion is: take a look at styled-components.

Why styled-components are awesome?

Now let's see how class name will be built for our section and paragraph.

As you can see section class begins with file name styled-section then we have two underscores _ _ after that we have Section (our styled component name), next we have dash – with random id brQlPq and after space ZYkKE modifier which includes our padding (class = styled-section__Section- brQlPq ZYkKE).

The same story for p tag – file name_ _styled component name-random id random modifier with our styles (class = styled-section__StyledP-fjMOAy dzkYXi).

To be able to see class name in above shape remember to install to your dev dependencies and to your .bablerc file babel-plugin-styled-components plugin.

To sum up. There is a massively growing community around styled-components with over 28,000 stars on GitHub, probably because using styled-components help you to create the perfect CSS-in-JS experience without losing touch with everything we already love about CSS which includes reducing the lines of code and other optimization features of SASS. 

Styled Components gives control of those states back to CSS instead of using a multitude of conditional class names.