An intro to styled components in your react project

CSS as a means of styling your web apps / websites is confusing, complex and can soon spiral out of control if you do not enforce a strict way of styling throughout your project.

This is mostly down to the fact that the semantics of it are odd and can be quite restrictive. For example, no for loops or functions. However, you do get the luxury of targeting elementIds, classes and others.

Tried but didn't achieve greatness...

There have been attempts to try and solve these problems with the likes of CSS pre-processors. These allow you to create styles in their own format which get transpiled down to CSS some popular examples might be SASS, LESS, SCSS etc. However, these come with their own problems. Such as they all can end up with the same issue of overcrowding of stylesheets like in CSS.

So what are styled components?

We are starting to live in a world whereby a large proportion of web apps are being developed in react. With this in mind styled components has been developed to be used alongside react when developing your websites / web apps. It takes the fundamentals of CSS and applies them to be closely integrated with our components. The main point is that we are no longer styling elements based on their type, elementId or className. We are now styling them as their own 'components' that are 'styled'.

Let's break this down in an example:

React + CSS

hello.css

.helloWorld {
    color: blue;
}

hello.js

const HelloWorld = () => (
    <div className="helloWorld">Hello World!</div>
)

The above demonstrates the way we are used to with a HTML / CSS world. This allows us to have a file to determine how elements should look and feel (hello.css). Alongside a file that allows us to construct our elements in a way that creates an experience (hello.js).

React + Styled Components

hello.js

import styled from 'styled-components';

const HelloHeader = styled.div`
color: blue;
`;

const HelloWorld = () => (
    <HelloHeader>Hello World!</HelloHeader>
);

Now from a glance this may look like a trivial change that has simply moved the CSS away from the individual file, into the component file. However, that is exactly the point. The styles now sit within the component where they are being used. This means that we are no longer relying on CSS classes or elementIds to style our components.

One of the main goals of styled-components is that it 'wants to remove the mapping between styles and components'. By incorporating our styles into our react code as 'components' we are now bridging that gap and allowing for more readable code from the outset. Gone are the days where a div has been styled by a stylesheet sitting tens of folders deep within a big codebase.

My thoughts?

Whilst styled-components is still a fairly new kid on the block it's definitley something I am going to keep playing with and seeing its potential. Since working on my personal website I have discovered it's benefits and how it fits into a project. I'm sure there are some points it falls behind on but with every new piece of disruptive tech, that's to be expected. As i progress further with styled-components I will be sure to blog again with my more advanced thoughts.

Helpful Links:

Styled Components: https://styled-components.com/

Let me know below in the comments if you have used styled-components in your react projects. If so, how did you find it? 👇

Comments

[Joseph R Miles]

I've been re-writing the styles of my personal website with Styled Components after having written the styles in Sass a couple of years ago. There's a lot to like about Styled Components, but I've also found myself running headlong into undocumented anti-patterns, such as creating a styled component for every HTML element in the component. Definitely has a learning curve for sure, but I'm having a blast.

[Will Holmes]

Interesting - my fear with this tech was that it would actually introduce more admin than needed (like the every styled component for html). It would be great to see a write up maybe of your experience with it?

[Joseph R Miles]

As promised, here's my write up about my experience migrating from Sass to Styled Components: dev.to/joebobmiles/migrating-from-...

[Joseph R Miles]

I can certainly oblige!

[rxliuli]

I will not choose it for a long time, or, because I have already chosen css-module, I will not easily change the scheme, especially now that there are dozens of css solutions in the react ecosystem, no one knows Who is the final winner? Most of these projects will become the remnants of history.

[Will Holmes]

This has been the problem for frontend for quite some time. There's always a new way to do things that seems amazing, it's just working out if it suits you. Typically refactoring a brownfield application to include the new way won't always pay off! I like your thinking 😊

[A.R]

Considering the shift from traditional CSS to styled-components in React, how do you see the adoption of styled-components impacting the maintainability and scalability of large web applications, especially in terms of code readability, modularization, and the potential challenges it may pose compared to conventional CSS practices?

"Followback for more insightful discussion"