Beware of Missuses of CSS-in-JS

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

Vitali Zaidman
Jan 14, 2019 · 2 min read

This void request was killing me:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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.

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store