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?

[divyanshu-code]

firstly , If your sizes are finite and known , stick with your current approach, but problem occur when your size not predictable or dynamic sizing . so your approach is better unless you need to support dynamic sizing.

themed stylesheet may be generated when you call:

withStyles(theme => ({ // styles here }))(column);

multiple things happen like , Using a theme-aware function to generate a JavaScript object of styles. These class names are injected into the DOM as actual CSS rules.

talking about expensive ! This process is not expensive if done once per used.

1. But it can be expensive when dynamic or per-render style generation as I talked above .
2. Each time styles are dynamically created means JavaScript code must evaluate your style object for large size. If you're doing this on every render, you're recalculating the same style object repeatedly which cause unnecessary CPU work every render.

may this help you !