What's the recommended way to define a shared piece of CSS?

[srmagura]

I want to define some shared CSS that is used wherever I display an error message in a form. Which of the two approaches below is recommended? Is one more performant than the other?

I'm using TypeScript and React with the new JSX transform.

import { css, CSSObject } from '@emotion/react'

export const formErrorCss1: CSSObject = {
    fontWeight: 600,
    color: 'red',
}

export const formErrorCss2 = css({
    fontWeight: 600,
    color: 'red',
})

[Andarist]

The second one is "targeted" by our css helper - this means that we can statically figure out that this particular object is actually meant to be a style and thus we can apply some, minor, optimizations to it. We can also give this a label, source maps, and stuff like that. Note that this sort of thing requires using our Babel plugin.

[Andarist]

I recommend reading this article. I agree with its author on the importance of "clear call sites" and this is what I've mentioned above.

[srmagura]

Thanks! That answers my immediate question, but what exactly does "clear call sites" mean?

Also, do you agree with the author that styles should not be imported or exported? I suppose the alternative is to have all styles attached to a particular component and share styles via component reuse.

(Sorry for the noob questions 🙊)