Writing future-proof CSS is hard. Conflicting classnames, specificity issues, and so on, come up when you have to write and maintain thousands of lines of CSS. To get rid of the aforementioned issues, Styled Components was created.
Styled Components makes it easy to write your CSS in JS and makes sure there are no conflicting classnames or specificity issues with multiple other benefits. This makes writing CSS a joy.
In this tutorial, we’ll explore what CSS in JS is, the pros and cons of
styled-components, and finally, we’ll redesign Unsplash using Styled Components. After completing this tutorial, you should be able to quickly get up and running with Styled Components.
Note: Styled Components was specifically built with React in mind, so you have to be using React to use Styled Components.
For this tutorial, you need a basic knowledge of React.
Throughout the course of this tutorial we’ll be using
yarn. If you don’t have
yarn already installed, then install it from here.
To make sure we’re on the same page, these are the versions used in this tutorial:
- Node 12.6.0
- npx 6.4.1
- yarn 1.17.3
Evolution of CSS
Before CSS-in-JS was created, the most common way to style web apps was to write CSS in a separate file and link it from the HTML.
But this caused trouble in big teams. Everyone has their own way of writing CSS. This caused specificity issues and led to everyone using
Then came Sass. Sass is an extension of CSS that allows us to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows us to create stylesheets faster.
Even though Sass might be thought of as an improvement over CSS, it arguably causes more harm than good without certain systems put in place.
Later, BEM came in. BEM is a methodology that lets us reduce specificity issues by making us write unique classnames. BEM does solve the specificity problem, but it makes the HTML more verbose. Classnames can become unnecessarily long, and it’s hard to come up with unique classnames when you have a huge web app.
After that, CSS Modules were born. CSS Modules solved what neither Sass nor BEM could — the problem of unique classnames — by tooling rather than relying on the name given by a developer, which in turn solved specificity issues. CSS Modules gained a huge popularity in the React ecosystem, paving the way for projects like glamor.
The only problem with all these new solutions was that developers were made to learn new syntaxes. What if we could write CSS exactly how we write it in a
.css file but in JS? And thus
styled-components came into existence.
Styled Components uses Template Literals, an ES6 feature. Template literals are string literals allowing embedded expressions. They allow for multi-line strings and string interpolation features with them.
The main selling point of Styled Components is that it allows us to write exact CSS in JS.
Styled Components has a lot of benefits. Some of the pros and cons of Styled Components are listed below.
There are lots of advantages to using Styled Components.
Injecting Critical CSS into the DOM
Styled Components only injects critical CSS on the page. This means users only download CSS needed for that particular page and nothing else. This loads the web page faster.
Smaller CSS bundle per page
As it only injects styles that are used in the components on the page, bundle size is considerably smaller. You only load the CSS you need, instead of excessive stylesheets, normalizers, responsiveness, etc.
Automatic Vendor Prefixing
Styled Components allows you to write your CSS and it automatically vendor prefixes according to the latest standard.
Remove unused CSS
With Styled Components, it’s easier to remove unused CSS or dead code, as the styles are colocated with the component. This also impacts on reducing bundle size.
Theming is easy
Styled Components makes it really easy to theme a React applications. You can even have multiple themes in your applications and yet easily maintain them.
Reduces the number of HTTP requests
Since there are no CSS files for resets, normalizers, and responsiveness, the number of HTTP requests are considerably reduced.
Styled Components generates unique classnames every time a build step takes place. This allows avoiding naming collisions or specificity issues. No more having global conflicts and being forced to resolve them with
Maintenance is easy
Styled Components allows you to colocate styles with the component. This allows for painless maintenance. You know exactly which style is affecting your component, unlike in a big CSS file.
Of course, nothing’s perfect. Let’s look at some downsides associated with Styled Components.
Unable to Cache Stylesheets
Generally, a web browser caches
.cssfiles when a user visits a website for the next visit, so it doesn’t have to download the same
.cssfile again. But with
styled-components, the styles are loaded in the DOM using the
<style>tag. Thus, they can’t be cached and every time user has to request styles when they visit your website.
Styled Components was made with React in mind. Thus, it’s React specific. If you use any other framework, then you can’t use Styled Components.
However, there’s an alternative very similar to
styled-componentsknown as emotion which is framework agnostic.