As a front-end developer, we have many choices at our disposal as to how we want to style our components. However, some choices, such as using CSS files or inline styling are becoming things of the past.

The future of styling components is trending towards CSS-in-JS. What is CSS-in-JS? In simple terms, it’s a way for you to write CSS code in a JavaScript file. Styled Components is the leading CSS-in-JS library on the Internet right now.

Furthermore, companies such as Airbnb, Lyft and Google make use of Styled Components. Why does this matter? It means that Styled Components has an active base of contributors and a thriving community. I’m just one member of many in the Styled Components community.

However, this post isn’t going to be an “introduction to Styled Components”, it’s about how you can use a technology such as Styled Components in a smart manner. The goal of this post is to answer the question of “how can I use Styled Components to their full potential?”

So let’s dive right in.

What is the Atomic Design Pattern?

Let’s take a trip back to your high school chemistry class. We know that all objects in the universe, no matter how complex, are built from atoms. Whether those objects are living or not, everything is built from the “ground up” using these atoms.

Atoms bond with other atoms to create molecules. Molecules come together to create more complex organisms such as cells. Organisms come together to create even more complex structures. Do you see the pattern?

You start off with the most basic building block, the atom, and start to develop more complex structures from it.

That sounds an awful lot like how we tend to build our React components. We take the building blocks of HTML, such as a <div> , and pair them with other building blocks of HTML to create more complex structures.

That’s the idea behind the Atomic design pattern. But how do you break down your components into their most basic elements in a smart and controlled manner? That’s where this handy-dandy Periodic Table of Elements comes in handy.

#design-patterns #javascript #styled-components #front-end-development #react