Please explain using inline styles comment about expensive stylesheets

The [css-in-javascript page](https://github.com/airbnb/javascript/tree/master/css-in-javascript) 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`.

```js
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}`])``?

Start with the css-in-javascript page and the inline-styles comment, then trace the documented css(styles.periodic, { margin: spacing }) and withStyles examples. Clarify whether each approach generates themed stylesheets differently, including the sizeStyles and css calls shown in the issue; done when the documentation answers which form is less expensive and why.

Written by the indexing model from the issue text.