v512.16.0
Jxnblk

Blog

Why you should definitely learn how to use CSS-in-JS

7/20/2019

From time to time, I've heard that CSS-in-JS poses a barrier to entry for some people. Like any new software abstraction, CSS-in-JS is intended to abstract away some of the complexities from a lower level implementation, in this case CSS. Abstractions are neither good nor bad, but they do require learning new things. Using CSS-in-JS lets you style applications without needing to worry about a few of the thornier aspects of CSS, but it doesn't replace CSS entirely, and you still need to have a solid understanding of CSS to be successful. You will absolutely need a solid understanding of CSS properties, values and types, inheritance, layout, stacking context, and the box-model to be successful with CSS-in-JS.

CSS-in-JS isn't a boogieman out to destroy everything you love about CSS. In my opinion, it can make authoring CSS far more enjoyable than any other tool I've used in the past, and I'd encourage you to give it a shot.

If you already know JavaScript, CSS-in-JS helps remove the need to use native CSS syntax, or deal with context switching between different languages. For younger developers straight out of bootcamp, this can make styling an application more accessible because there are fewer new things to learn. I've seen this myself, and remember one former colleague gushing about how Styled Components was so much easier to use than what they'd learned in school.

If you're less familiar with JS syntax, the effect can be the total opposite, and it can seem like too much to learn at once. Don't get discouraged. You can still learn how to use CSS-in-JS, and keep in mind that whatever you learn along the way will be applicable knowledge in many other situations where JS is used. I like to think of CSS-in-JS as a potentially low-barrier way to get started with JS.

Despite what I've written here, it can still feel like a barrier because it does require learning something new, but one thing that I love about software development is that I'm never bored and constantly learning.

If you're not willing to learn something new, then you probably won't like CSS-in-JS at all, but if you do have a curious mind, I hope this post helps.

What does CSS-in-JS do?

Most libraries are designed to:

What does CSS-in-JS not do?

At the end of the day, you're still writing code that generates CSS, and the full power of the language is still available. CSS-in-JS does not get rid of the need to understand the following:

What abstractions does CSS-in-JS provide?

CSS-in-JS libraries allow you to author styles without generally having to think about:

What you need to know

To be effective with CSS-in-JS, you'll need to have a good grasp of the following concepts:

Types in JavaScript:

MDN is a great resource for learning JS, and I'd highly recommend their tutorial on JavaScript data types and data structures.

To really excell with CSS-in-JS, you'll benefit from understanding the following:

What other benefits does CSS-in-JS have?

Where do I start?

There's certainly no one-size-fits-all answer here.

If you haven't used React before, or have less experience with JS, I'd recommend checking out the Gatsby tutorial. Once you have a good grasp of the concepts laid out in the tutorial, see the guide on using Using CSS-in-JS.

If you know enough React to get going on your own, I'd recommend checking out Styled Components. Then, once you've got that working, definitely check out Emotion. These are the two most widely used CSS-in-JS libraries at the moment, and between the two of them, they cover a lot of ground.

If you have any questions or thoughts on how to make this post better, please reach out to me on Twitter.

Novantica game screenshot with protagonist on hoverboard

I'm currently working on Novantica, a sci-fi adventure game.

Wishlist on Steam