We bring to your attention a translation of the latest introductory article by Sacha Greif, co-author of Discover Meteor, on the specifics of working with the Styled components library.
“CSS is a strange thing. You can learn its basics in 15 minutes, but it can take years to find a good way to organize styles.



This is partly due to the features of the language itself. In its original form, CSS is pretty limited - no variables, loops, or functions. At the same time, it unties your hands, providing the ability to style elements, classes, IDs, or any combination of them.



Chaotic style sheets

As you might already have experienced, this often leads to complete confusion. Although preprocessors, such as SASS and LESS, add many useful features, they are not able to suppress anarchy in CSS.

This organizational work was provided by methodologies such as BEM, which - although useful in this regard - are still not mandatory and cannot be implemented more universally, at the language or tool level.

CSS new wave

Fast forward a couple of years: a new wave of JavaScript-based tools is trying to solve these difficulties fundamentally by changing the way CSS is written.

Styled Components is one of these libraries that quickly attracted the attention of the masses due to its inherent mixture of innovation and familiarity. Therefore, if you use React (and if not, I advise you to read my articles “ JavaScript Curriculum ” and “ Introduction to React ”), you should definitely take a look at this CSS alternative.

I recently used Styled Components to redesign my personal site and I want to share some points that I highlighted during the work.

Components, Styled

The main thing to keep in mind when working with Styled Components is that the name should be understood almost literally. You no longer style HTML elements or components based on their class or HTML element:

Hello World
h1.title{
  font-size: 1.5em;
  color: purple;
}

Instead, you define stylized components that have their own encapsulated styles. Next, you freely use these styles throughout the code:

import styled from 'styled-components';
const Title = styled.h1`
  font-size: 1.5em;
  color: purple;
`;

The difference seems to be small, and in fact both syntaxes are very similar. But the key difference is that styles are now part of the component. In other words, we get rid of CSS classes as an intermediate step between a component and its styles.

As one of the creators of Styled-components Max Stoiber said:

“The main idea of ​​styled-components is to implement best practices by removing mapping between styles and components.”

Reducing complexity

At first it seems illogical, because the whole point of using CSS instead of styling HTML elements directly (remember the font tag?) Was to separate styles and markup by introducing classes as an intermediate layer.

But such a disconnect also creates a lot of difficulties, and on this basis it can be argued that a "real" programming language - such as JavaScript - is more suitable to fix these difficulties than CSS.

Props, not classes Following

this “non-class” philosophy, styled-components use props instead of classes for everything that relates to customizing component behavior.

So instead:

Hello World
 // will be blue
h1.title{
  font-size: 1.5em;
  color: purple;
  &.primary{
    color: blue;
  }
}

You write this:

const Title = styled.h1`
  font-size: 1.5em;
  color: ${props => props.primary ? 'blue' : 'purple'};
`;
 // will be blue

As you can see, styled-components allow you to clean components in React, taking everything related to CSS and HTML implementation beyond.

However, styled-components CSS is still CSS too. Therefore, this code is also quite acceptable, although not quite ordinary:

const Title = styled.h1`
  font-size: 1.5em;
  color: purple;
  &.primary{
    color: blue;
  }
`;
 // will be blue

This is one of the features that makes styled-components a very easy-to-understand tool: when doubts creep in, you can always go back to what you know!

Disclaimers

It is also important to note that styled-components is still a young project and some of its features are still not fully supported. For example, if you want to repeat the style of the parent component in the child, at the moment you will have to use CSS classes (at least until styled-components v2 comes out).

There is also no “legitimate” way to pre-render your CSS on the server, although this can definitely be done by manually adding styles.

In addition, styled-components create their own random class names, which can make it difficult to use the “developer tools” of your browser to find the initial location for the display of your styles.

But it is clearly encouraging that the development team is aware of these problems and is actively working to fix them. The second version is coming soon, and I'm really looking forward to it!

Find out more

My goal in this article was not to explain in detail how styled-components work, but rather to give a little tip so you can decide if you are interested.

If I managed to arouse interest in you, here are some resources on which you can learn more about styled-components:

• Max Stoiber recently wrote an article on the meaning of styled-components on the Smashing Magazine resource. 
• The styled-components repository itself has extensive documentation.
• Jamie Dixon's article reveals several advantages of using styled-components
• If you want to learn more about how the library works in practice, read this article by Max.

And if you suddenly want to delve deeper into the topic, you can also look at Glamor - a different look at CSS for a new wave! ”