Get ready for the new era of web styling
Why you should consider using styled components in your next project
Table of Contents:
1. Introduction — a brief overview
2. The dawn of styled components and why it’s easy to fall in love with them
3. Cons — ‘use the right tool for the job’
4. Summary and conclusions — this article in a nutshell
Introduction
The biggest CSS paradox is that the learning curve seems to be really flat at the beginning but writing readable, clean and easily maintainable styles is definitely not straightforward, especially in complex projects.
The Internet has changed profoundly since 1996 when CSS was introduced. Of course, CSS changed as well (right now most of the web use CSS3) but designed previously for newspaper-like layouts and wasn’t ready for sophisticated web applications, which started to require better and better user experience so simple layouts known from ‘before’ were not good enough anymore.
That’s why devs started using preprocessors over plain CSS and created many tools to make styling easier and faster.
Cascading nature of CSS and the dawn of web applications created requirements for using simple and consistent naming conventions e.g. BEM to avoid name collisions. Sass mixins enabled us to create more generic styles without a need to remember countless class names added to HTML tags. Nesting, mixins and other sass features resolved all those confusing and unexpected problems when some classes overlap e.g. when they were put in a specific order which made CSS unpredictable and made DX much worse than it could be.
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.
Styled Components let us create react components that contain specific styles. This solution enables new possibilities I’ll write about later and solves some problems I already mentioned.
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?
Flat learning curve
First of all, because it’s really easy to start.
1. The syntax is similar to the scss one, with the ability to use `&` for nesting styles.
2. Learning new features is a pure pleasure because documentation is descriptive, covers a lot of possible use cases and has well defined and useful examples for each of the core features.
Developer experience and new debugging possibilities
From my point of view, the biggest advantage of the styled components is ‘hidden’ in its name. `Styled component` is basically a component containing styles. This thing solves a lot of the problems I mentioned earlier straight away. You cannot have accidental name collisions as you’ll get a warning in your IDE or an error inside developer console before you get into trouble.
Reusable and easily adjustable styles + those awesome features to fall in love with
As I mentioned before, sass was an amazing step forward in terms of writing reusable styles, but I can bet that every front-end developer thought at least once how amazing it would be to pass values from component straight to stylesheet without all those nasty workarounds (e.g. programmatically setting style properties for dynamic values). With styled components, we can pass props down to the components we are styling and even use functions inside them!
const Button = styled.button`
color: ${props => props.color || `var(--white)`};
`;const SpecialButton = styled(Button)`
border: 1px solid ${props => props.color || `var(--white)`}
`
In the example above, I’ve created a Button component that is just button that can take props. By passing color prop I can set the color of this button to and using a function I’ve created fallback to `white` in case of props.color not exist. Then I’ve created another button component called SpecialButton that basically extends Button component. This feature helps us create variants of the same element without repeating existing code in an elegant way.
That gives us an awesome playground and I’d say the ‘right’ tool for creating awesome UI’s and making UI dev experience truly great!
This gets us straight to the next point which is…
Styles easier to maintain
Due to better developer experience, debugging and ability to test, and features that are ready to create complex styles in a clean and elegant way you can effortlessly maintain and develop styles in your app.
Testing
Another advantage is the ability to test your styles. It can be extremely helpful when you need to keep things looking in a specific way and protect it automatically from accidental changes.
Atomic design ‘ready’
Another thing strictly connected with the “ component” part of the styled components is the possibility to apply atomic design without making unintuitive changes to the app structure.
Only because we can create styles as components with very little effort we can create styles architecture in our app that is cleaner than ever.
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.
I hope you’ll have great time styling!
