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:
- Let you author CSS in JavaScript syntax
- Colocate styles with components
- Take advantage of native JS syntax features
- Take advantage of anything from the JS ecosystem
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:
- How styles are applied to the DOM
- How inheritance works
- How CSS properties work
- How CSS layout works
What abstractions does CSS-in-JS provide?
CSS-in-JS libraries allow you to author styles without generally having to think about:
- The cascade (not inheritance)
- Specificity
- Naming selectors
- Enforcing naming conventions
- Linting another language
- Enforcing file structures for another language
- Additional build tools
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:
- Strings
- Numbers
- Objects
- Arrays
- Boolean
- Null
- Undefined
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:
- Math operations
- Logical operators
- Ternary operators
- Dot and bracket syntax
- ES Modules
- Object spread
- Destructuring
What other benefits does CSS-in-JS have?
- It can make dead code elimination easier to manage
- It will throw errors to help you avoid mistakes, including syntax, type, and undefined errors
- Many libraries offer support for theming
- You can use virtually any package from npm
- You can use ES modules and scope
- Most libraries offer ways to handle dynamic styling
- Styles are generally "scoped" to a specific component
- It's far easier to write unit tests with CSS-in-JS
- Many libraries offer performance improvements like critical CSS with no additional setup needed
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.
