Beware of Missuses of CSS-in-JS

A common, hard-to-find, issue I’d like to share with you

Vitali Zaidman
Jan 14 · 2 min read

This void request was killing me:

We are using “NextJS” so a request to “/” is a pretty heavy request with redirects, data fetching and React rendering on the server.

It was really hard to understand where it comes from because I had zero information regarding it’s initiator (as you can see in the image above).

After breaking the HTML into small chunks and deleting them chunk by chunk i found the following style:

I found the bug. The following styled-components code caused it:

As you can see in the image above, when imageUrl is empty,
background-image is url().

And indeed imageUrl is null sometimes.

The fix is to make sure we don’t pass anything to background-image if imageUrl is void.

A better way to fix it is to use the dynamic imageUrl function because imageUrl can receive many different urls so 200 Dish divs with different imageUrl for each would create 200 classes.

Instead if we use it like the follows, we will only have 2 styles:

This article explains this part better.

So how do we prevent these empty url()s? lint? some styled-components tools?

What do you think?

I’d like to have a conversation in the comments.

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade