Skip to main content

The Basics of Styled Components

· 3 min read
Bruno Carneiro
Bruno Carneiro
Fundador da @TautornTech

Creating CSS with JS ò.ó

Well, this is my first article and I'm very excited about it. The person who encouraged me to write it was my friend Isac, I hope you enjoy it =D

Something I really love is CSS — I have a lot of fun with it, but not everything is perfect… There are moments when everything seems to fall apart: you fix something on one side and break it on the other.

It is very easy to create side effects with CSS, to override attribute values and classes, to break entire pages with a simple change of a few values.

If there are no well-defined standards in the project, if the development team is not well aligned, the maintainability of page styles can become chaotic — especially in large-scale projects.

Even projects with well-defined methodologies can face big problems. No matter how well they follow development best practices, CSS files tend to get very large, complex, and hard to scale — not to mention the variation in class names doing the exact same thing :'(

So… where the heck does Styled Components come in? Let's go, young grasshopper…

With styled components it is possible to define an entire style and create a normal React component. WITH JAVASCRIPT!

Source: https://www.styled-components.com/Source: https://www.styled-components.com/

In the example above we have the creation of an anchor component, equivalent to the <a href="">link</a> tag. Notice that it has all its CSS styles and includes a check for whether or not a property called primary exists — if it does, it applies a different background and color from the default.

Sure, but wouldn't that be more of the same? No!

By writing CSS directly in JS I eliminate several problems. One of them is class creation — styled-components handles that for you. It creates a hash class that ends up in the <head>, containing all the attributes that were inserted into a given component. If we inspect it we can see this more clearly, as shown below:

Component with defined styleComponent with defined style

Created classesCreated classes

This is done at runtime — it's wonderful :)

Below I'll list more benefits and, of course, a few downsides :'(

Pros:

  • Class creation at runtime;
  • Manipulation in JS, allowing you to add rules and validations;
  • Code coupled to the component, with no risk of duplicate classes or side effects, since each created class is unique;
  • Smart optimizations;
  • Scalability;
  • Componentization (package management)

Cons:

  • One more lib :)
  • Traceability;
  • One extra process to run;
  • Makes e2e tests harder;

Well folks, I know I summarized things very briefly and kept it quite superficial regarding the power that styled-components has, but I'll leave a deeper dive for another post where I can explain the tool better.

But before finishing, I wanted to mention that it's possible to write automated tests with Jest! How cool is that.

Thanks and cheers!

Sources: https://www.styled-components.com/ https://medium.com/tableless/uma-linguagem-de-estilos-unificada-1e5976fa383e https://github.com/styled-components/jest-styled-components