Get ready for the new era of web styling

Why you should consider using styled components in your next project

Kasia Marciniszyn
Dec 20, 2018 · 5 min read
Photo by @goran_ivos on Unsplash

What exactly are styled components?

Styled Components is a library created originally for React (right now — December 2018- you can use them with React Native and with VUE.js). The idea behind it was that styles shouldn't be any longer completely separated from markup and logic. When we started to divide front-end parts of applications into modules and then to the components that have a specific task to perform and specific styling using styles as class names that appeared across the whole app was no longer the best way to do it.

Why is it worth to try styled components?

So, if sass is such a goodie, why even to consider rewriting your styles or creating your next react app with styled components and spending additional time to learn a new tool?

const Button = styled.button`
color: ${props => props.color || `var(--white)`};
`;
const SpecialButton = styled(Button)`
border: 1px solid ${props => props.color || `var(--white)`}
`

Are there any cons then?

I’d say yes, there are, but they are all connected to the wise sentence ‘use the right tool for the job’ so when you are creating a tiny website and need to do it fast it will be much better to use the tool you already know and are comfortable with.

Summary and conclusions

Why it’s worth to try styled components
1. They seem to be made for atomic design architecture
2. Rather flat learning curve (if you are familiar with CSS, sass and JS)
3. Ability to create reusable and adjustable styles (props and functions ❤ )
4. Styles are easier to maintain than in sass or plain CSS
5. Ability to test your styles out of the box
6. Awesome documentation and helpful community
7. They are server side rendering ready

Possible drawbacks
1. Even if styled components are intuitive and easy to step into you’ll still need a little bit of time to wrap your head around them
2. If you are creating something small or you need to do your thing as fast as possible you’ll probably be more comfortable with solutions you’re familiar with
3. If you plan to move the existing project to styled components you may need some time to switch between class-based styles and styled component concept

From my point of view, it’s definitely worth to try styled components because they introduce the implementation of a new approach to writing styles. Component-based solution and core features like mentioned props and functions bring app styling to a completely new level.

Adshares

Blockchain in advertising https://adshares.net/

Thanks to Adriana Olszak.

Kasia Marciniszyn

Written by

Front-end developer at @adshares

Adshares

Adshares

Blockchain in advertising https://adshares.net/