Please explain using inline styles comment about expensive stylesheets

[merlinstardust]

The css-in-javascript page states

• Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.

Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.

In the example, you have css(styles.periodic, { margin: spacing }), but this still requires you to use the withStyles HOC, so aren't you generated a themed stylesheet regardless of the prop? What makes this less expensive?

For another example that I'm actually using and am wondering about, I have these various column classes, which I then spread into the styles returned by withStyles.

const sizes = [10, 20, 30, 40, 50, 60, 70, 80, 90, 25, 75];
const sizeStyles = sizes.reduce((object, size) => ({
  ...object,
  [`columnOffset${size}`]: {marginLeft: `${size}%`},
  [`columnPercent${size}`]: {flex: `0 0 ${size}%`, maxWidth: `${size}%`},
}), {});

withStyles(() => ({
  // other styles above
  ...sizeStyles,
}))(Column);

And my css call is css(styles.column, styles[`columnPercent${size}`], styles[`columnOffset${offset}`]).

But would it be somehow better to skip adding it to the returned styles and instead do css(styles.column, sizeStyles[`columnPercent${size}`], sizeStyles[`columnOffset${offset}`])?

[lencioni]

What you have there should be totally fine, since the cardinality is pretty low.

Some cases where you wouldn't want to do this would be e.g. if your component accepted a prop that could be any value that you need to use in a style, or if you are doing animation with JavaScript, where you need to change the style of something to a totally unique value every 16ms.

Does that help explain things?

[merlinstardust]

Mostly. Can you go a bit into how the themed stylesheet is generated and why it is expensive?