Should i use css for string returned from styled function?

[avasuro]

Hi,

I use @emotion/react, like this:

import {styled, css} from '@emotion/react';

type Props = {
  $color: string
}

const SomeComponent = styled.div<Props>(({$color}) => `
  color: ${$color}
  // ...other props
`)

It works perfectly fine. But I feel like I read somewhere before that if we return big string templates from a function - it's better to wrap them into css. Also, my IDE (WebStorm) doesn't highlights such css code until I wrap it into css like this:

const SomeComponent = styled.div<Props>(({$color}) => css`
  color: ${$color}
  // ...other props
`)

My question is: is there any sense to use this css wrapper for strings that are returned from styles getter function? Probably there are some performance benefits?

Appreciate for any help.

[nullisdefined]

Using CSS tags doesn’t significantly impact the actual performance of your website. However, it can make development more convenient, especially when writing lengthy CSS code. With CSS tags, you can benefit from better syntax highlighting in editors, automatic addition of vendor prefixes (e.g., -webkit-, -moz-), and support for nested styles. Additionally, using CSS tags can help component names appear clearer in browser developer tools.