📝 This Week in Web Design and Development

📝 From the Blog

The Differing Perspectives on CSS-in-JS

Drama! Feelings! Muuuuurder! Okay, that last one not so much. But folks tend to have BIG opinions when it comes to styling things with JavaScript—whether that’s with CSS Modules, emotion or any other system that lets you write CSS within a JavaScript file.

So in this post, Chris thankfully breaks down the who, what, and why of CSS-in-JS and tries to rid it of all the dang drama:

👎 Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn’t belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the font tag and such.)

👍 Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most JavaScript frameworks, has proven successful to them, so wrapping in styles seems like a natural fit.

I think a lot of this probably depends on the project and team you’re working on. If you’re on a snappy team working on lots of little websites then you probably don’t need a CSS-in-JS solution. But if you’re working on a giant app with hundreds of engineers all contributing to that codebase then you need to address the concerns of everyone working on it.

That’s where the drama comes from, I think. Front-end development solutions change depending on the problem you’re trying to solve and sometimes it can be particularly difficult to see the argument from that other side.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s