using the css template literal function

[ronderksen]

My team and I started to use Emotion with the Styled Component syntax and so far it's been pretty straightforward to use.
However, at some point we came across the following syntax when there are multiple properties that need something from the props:

const SomeElement = Styled.div`
  ${({ theme }) => css`
     font-size: ${theme.typography.fontSize.large};
     margin-top: ${theme.spacing.small};
  `}
`

Another colleague didn't use the css template literal function, and it still seems to work fine. So what is the best practice here. Should we use the css or not?

[Andarist]

using css will usually improve the syntax highlighting in your IDE and give you auto-formatting with Prettier and such.