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? 👇