8 reasons to use styled-components
Tags: webdev, javascript, styledcomponents, react
Published: 2019-07-08 18:50:57

---
title: 8 reasons to use styled-components
published: true
tags: web-development,javascript,styled-components,react
canonical_url: https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d
---

![](https://cdn-images-1.medium.com/max/324/1*0wLQ0p3qBo1bBt5km_nUXQ.png)

> TL;DR: In this article, we will be looking at some of the various benefits of styled-components and why you should consider adopting it as your preferred CSS-in-JS framework.

### What is styled-components?

[Styled components](http://styled-components.com/) is a **CSS-in-JS** styling framework that uses tagged template literals in JavaScript and the awesome power of CSS to provide a platform that allows you to write actual CSS to style react components. In essence, styled components are easy-to-make react components you write with the[styled-components](http://styled-components.com) library where you can style your components with plain CSS inside your javascript code. On the official documentation page you would see the example below:

```jsx
const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;


  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary>
      GitHub
    </Button>

    <Button as={Link} href="/docs" prefetch>
      Documentation
    </Button>
  </div>
)
```

We can clearly see the button as a JavaScript variable and the styles defined in back-ticks are plain CSS styles. We also see the nested style property also with plain CSS styles. This is how styled-components render CSS in JavaScript.

I know the subject of **CSS-in-JS** is heavily debated in the frontend community especially among react developers so I’d ask that you keep an open mind.

[![](https://cdn-images-1.medium.com/max/1024/1*GPjaPKNNUYHU8EsA3Z0JGA.png)](https://logrocket.com/signup/)

### Styling React components

There are many ways to style a react component:

- Traditionally — with CSS in external CSS files, which then pass a string as the className prop to reference them like so:

```jsx
render() {
  return <span className="menu navigation-menu">Menu</span>
}
```

If you have worked with a large web application, you can attest to the fact that the CSS files begin to get really bulky, clumsy and very complex. One great solution to this is the introduction of SASS and although that helps, it starts to become the same thing with the sheer number of SCSS files a project can have and the abstraction starts to even become complex in itself.

- Inline CSS inside your react components:
```jsx
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
```
This is highly discouraged by React as it is not sustainable nor scalable (more on this later).

- **CSS-in-JS** is a technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated as a style element and attached directly on top of the DOM. There are a host of CSS-in-JS frameworks out there: styled-components, emotion, jss, radium, aphrodite and a lot more you can[see a comparison table here](http://michelebertoli.github.io/css-in-js/). Styled-components is however arguably the most popular.

This option looks promising, it’s no wonder there is a [very fast widespread adoption](http://www.npmtrends.com/jss-vs-aphrodite-vs-radium-vs-styled-components-vs-glamorous-vs-emotion-vs-styletron) with over 600k downloads in the past month.

### Why you should use styled-components

#### Freedom to build custom components with CSS

With styled-components, the user interface design focus shifts from just merely styling HTML elements or React components through className to defining styled components that contain their own styles and are so easily reusable across the entire project. So initially a sub-heading declaration which looked like this:

```jsx
<h2 className="subTitle">Gucci Snakes </h2>
```

with the styles defined like this:

```jsx
h2.subTitle{
  font-size: 2em;
  color: blue;
}
```

would become something like this:

```jsx
import styled from 'styled-components';
const Subtitle = styled.h2`
  font-size: 2em;
  color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>
```

The styles become an integral part of the component here, thereby eliminating the key part the CSS classes initially played by removing the mapping between styles and components. This is all built with plain CSS, there is always this feeling of familiarity you get when working with something you are already used to. This feeling has been carefully preserved for every user of styled-components as the syntax is still largely plain CSS.

#### Inline styling on steroids

Ordinarily, inline styling is discouraged by the react team, a concern that is very valid because inline styles do not allow the use of pseudos and media queries. Also, inline styles should not be used due to a lot of concerns about browser compatibility, camel-casing and automatically appended scalar quantities. But with styled-components, we can see a kind of inline styling but without all the aforementioned inline styling baggage, I call it _vibranium_ power. Here is sample code to demonstrate:

```jsx
const paragraphStyles = {
color: red,
backgroundColor: black,
padding: 2px
}
<p style={paragraphStyles}> inline styles applied here </p>
```

Compile output:

```jsx
<p style="color: red; background-color: black;">
inline styles applied here </p>
```

But with styled-components…

```jsx
import styled from 'styled-components';
const Text = styled.div`
color: red,
background: black
`
<Text>Styled with CSS-in-JS </Text>
```

Compiled output:

```jsx
<style>
.hash12345tf {
background-color: black;
color: red;
}
</style>
<p class="hash12345tf">Styled with CSS-in-JS</p>
```

We also see how the styled-component attached a style tag on top of the DOM while an inline style just works with the properties of the DOM node instead.

#### Native mobile support

For teams with a React codebase who also use React Native for mobile development, styled-components is one of the best-unified solutions out there for you. If consistency across platforms is a priority, then you would be glad to find out that styled-components can be bundled into React Native.

In React Native with styled-components, you can just assign alias names to comments making your JSX code very legible. Also, you can convert any component even custom components to a styled component by simply invoking styled().

#### Scoped styles

In the Frontend Tooling world, the team at [Vue](https://vuejs.org/) were (in my opinion) the very first to perfect this concept of scoping styles. There is one very annoying thing about using CSS and that is the fact that for a non-expert CSS user, it gets really frustrating when you change the style of a particular element or class in your stylesheet and it inversely affects another seemingly unrelated element or behaviour in the DOM. This is a great reason to use styled-components as it is component based and very scoped, like Vue.

#### No-class policy

Styled-components enforces the use of props in the place of classes. This no-class policy has helped them make more developers tow the route of best practices for controlling the behaviour of a component.

Initially, you would write:

```jsx
<h2 className="title primary">Hello World</h2> 
h2.Subtitle{
  font-size: 2em;
  color: green;
  
  &.primary{
    color: red;
  }
}
```

But now, it should be like this:

```jsx
const Subtitle = styled.h2`
  font-size: 2em;
  color: ${props => props.primary ? 'red' : 'green'};
`;
<Subtitle primary>Hello World</Subtitle>
```

We see how we have managed to keep HTML and CSS manipulations out of the component.

Alternatively, you can always go right back to className, the same results will be achieved.

```jsx
const Subtitle = styled.h2`
  font-size: 2em;
  color: green;
  
  &.primary{
    color: red;
  }
`;
<Subtitle className="primary">Hello World</Subtitle>
```

#### Server-side rendering

styled-components supports concurrent server-side rendering, with stylesheet rehydration. The basic idea is that every time you render your app on the server, you can create a Server StyleSheet and add a provider to your react tree, that accepts styles via a context API.

This doesn’t interfere with global styles, such as keyframes or _create Global Style_ and allows you to use styled-components with React DOM’s various SSR APIs.

#### CSS unit and snapshot testing

Owing to the fact that styled-components are indeed components, unit testing can be run on them. This is a major CSS breakthrough and there is already a jest integration support by the styled-component team.

[Jest Styled Components](https://github.com/styled-components/jest-styled-components) is a set of utilities for testing styled-components with[Jest](https://github.com/facebook/jest). This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules. It can be installed like this:

```jsx
npm install --dev jest-styled-components
```

Here’s an example of a test:

```jsx
import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
  color: red;
`
test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})
```

And here’s an example of the resulting snapshot:

```jsx
exports[`it works 1`] = `
.c0 {
  color: green;
}
<button
  className="c0"
/>
`
```
#### Sass and polished support

If you followed this article to this point, you must have noticed some nested styles, Sass and even Polished, a toolset created by the team to further stretch the powers of Sass:

```jsx
const Link = styled.a`
  cursor: pointer;
  text-decoration: none;
  &:hover {
    color: blue;
    text-decoration: underline;
  }
`;
```

Supporting Sass exposes the core mission of styled-components and that is 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.

### Arguments against styled-components

It’s hard for me to come up with very many reasons not to use styled-components (especially given the title of the post), but it would be unfair if I did not also point out some (valid) concerns about CSS-in-JS frameworks in this article.

#### **The lock-in**

There is a kind of nested lock-in that exists for every user of styled-components and you should be very aware and comfortable with it. You are locked into JavaScript then into the React library then finally into styled-components. If any of them goes away, you would have to painfully refactor your codebase.

#### **Learning curve**

Some people also indicate the learning curve of styled-components is steep and also the unique differences among CSS-in-JS frameworks. I would strongly recommend using and sticking to styled-components.

#### **Continuity concerns**

[Styled-components started about two years ago](https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7?source=collection_home---4------17---------------------) and React developers always ask what if it stops being supported. You have to make sure you aware of this before using them in production.

#### **Personal preferences**

People do not like change. This is, in fact, a valid argument as CSS in a separate document is still one of the longest lasting standards in web development.

#### **Community concerns**

Some people feel that the styled-components community is small and they might not get enough support and as fast as they might need it when they run into difficult bugs, use cases or errors. This is also valid but you have to put the lock-in nature of styled-components into consideration to understand why.

### Conclusion

There is a massively growing community around styled-components with [over 22,000 ⭐️on GitHub,](https://github.com/styled-components/styled-components) mostly coming from React developers which is very encouraging and speaks of the prospects of longevity.

It is also very regularly maintained, you can[**check out the releases page here**](https://www.styled-components.com/releases) **.** If you are a CSS enthusiast, you can[**check out this State of CSS Survey**](https://stateofcss.com/?source=announcement) that is currently all over the internet. If you enjoyed reading you can[**follow me here**](http://medium.com/@viclotana) for more articles, happy coding!
* * *
### Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps

[![](https://cdn-images-1.medium.com/max/1024/1*s_rMyo6NbrAsP-XtvBaXFg.png)](https://logrocket.com/signup/)<figcaption><a href="https://logrocket.com/signup/">https://logrocket.com/signup/</a></figcaption>

[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

[Try it for free.](https://logrocket.com/signup/)
* * *
The post [8 reasons to use styled-components](https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/) appeared first on [LogRocket Blog](https://blog.logrocket.com).