DEV Community

Why do we keep talking about CSS-in-JS?

Sid on May 07, 2019

Remember the first time you wrote some html/css? It was amazing, right? <div style="color: blue">Hello world</div> So simple, so...
Read full post
Collapse
 
chiangs profile image
Stephen Chiang • • Edited

With React scripts 2.0+ all you need to do to get going with CSS modules is just change the name of the style sheet to have .module. in the name.

For example button.module.css/scss/sass/etc.

Couple that with a global index.css, BEM conventions, and use css variables, keeps everything pretty easy and manageable for the way I do things.

Collapse
 
siddharthkp profile image
Sid •

all you need to do to get going with CSS modules is just change the name of the style sheet to have .module. in the name.

That's amazing!

Collapse
 
thekashey profile image
Anton Korzunov •

increasing the size of your javascript bundle by a small amount.

Well, not quite. Especially with possible package duplication in mind driven by too many breaking changes made in the past (and probably in the future).

Collapse
 
eatsjobs profile image
Pasquale Mangialavori •

Just a curiosity: have you kept in consideration others css-in-js libraries like Linaria.js, css-blocks, aphrodite, jss in the pros and cons analysis?

Collapse
 
siddharthkp profile image
Sid •

I have :)

The comparison table linked in the post also helped: github.com/MicheleBertoli/css-in-js

Collapse
 
avxkim profile image
Alexander Kim • • Edited

I find css modules more convenient to use than CSS-in-JS approach. What do people are using these days in 2020?