#2: Why I prefer Styled components to build React apps

The practical way how to style the building blocks

In the Part #1 of My Dev Stack series I gave you few reasons why I use React as my primary framework. And now you are probably wondering…

“How does this guy handle CSS?”

The answer is:

Simply and easily with Styled components

npm install styled-components

Thats all you need to do. Really! That’s why I love it! No Babel, no Webpack, no CSS pre or post processing. Only JavaScript and nothing else.

CSS in JS

“You mean CSS in JS? Man, that’s weird. I would never do that!”

Don’t panic. Just let me show you few examples why this is a great idea.

But let’s write some Styled component first:

import styled from 'styled-components;
const Title = styled.h1`
  font-size: 18px;
`;

The styled variable contains many functions representing all known HTML elements. The strange h1`` syntax is a tagged template literal. And it’s nothing else then a call of this function: h1('')