expose an API for creating a single style "rule" instead of entire sheet about aphrodite HOT 12 CLOSED

Couldn't you just put StyleSheet.create in a function and then dynamically create it? That's what I'm currently doing.

I wonder though if it's a bad idea performance-wise or for some other reason. All the examples seem to create the stylesheets statically.

Anyway, an example:

const createStyle = (color) => StyleSheet.create({
  foo: {
    fontSize: 20,
    padding: '1em',
    color: color,
    borderColor: color,
    // etc. etc.
  }
});

// and then …

const Foo = ({color}) => {
  const styles = createStyle(color);
  return <div className={css(styles.foo)} />
}

from aphrodite.

Yes, so memoizing dynamic StyleSheet.creates seems like the way to go.

from aphrodite.

Does selecting a class at runtime not work well? css(webPhoneExercisesEnabled ? styles.domain1 : styles.domain2)?

from aphrodite.

It doesn't look like there's a StyleSheet with rules that are just colors. I guess styles for each of the domain colors... we do something like this for linksWithoutVisited.

from aphrodite.

It seemed like a whole stylesheet might be more heavyweight than a single rule, but I guess that rule has to live somewhere.

from aphrodite.

I'd still be interested in the negative implications of this approach. Let's say I have lots of components which dynamically create new style sheets like this on each render. It seems to me that this could have a performance hit.

But maybe it's simply solved by memoizing the function which creates the stylesheet.

Are there any other concerns? If not, I can add an example for this to the README.

from aphrodite.

@herrstucki I have no evidence for this, but I think that StyleSheet.create is slow compared to css(). Thankfully, since we hash the classnames that are generated, calls to css(styles.foo) won't add any more styles to the document, so at least it won't be super slow.

I think that memoizing things is probably a good idea though. We do that in a couple of places at Khan Academy.

from aphrodite.

Might I recommend we come up with some benchmarks before we start optimizing things that we think are slow?

from aphrodite.

Voilà: https://bl.ocks.org/herrstucki/2f8113fcde444f2026a3b95e977045e9

See console for timings (I only tested in Chrome). What I'm doing:

• Call StyleSheet.create 100 times and generate 10 distinct classes with it
• Create 100 buttons with those 100 stylesheets
• Create 100 buttons again
• Create 100 unstyled buttons for reference

Turns out the first 100 calls to css are the slowest (3 – 5 times slower than 100 calls to StyleSheet.create). The second round of css is much faster.

I haven't profiled further yet but I assume that actually injecting the styles is the slowest part.

from aphrodite.

Here's a jsbin version so people can play around with it. Still looking into it... https://jsbin.com/namoce/edit?html,js,output

from aphrodite.

Very interesting @herrstucki! Thanks for making this. Looks like it's pretty darn fast as it is. I'm no perf expert, but here's what I see in my output:

create: 15.070ms
css1: 26.606ms
css2: 2.643ms
noCss: 0.518ms

There's definitely a difference here, but I'm not certain whether solving the problem will make any noticeable difference on perf. ¯_(ツ)_/¯

from aphrodite.

So just to be clear, if you were to recreate the same styles each time (i.e. rerun StyleSheet.create every time) and use the same styles, the StyleSheet.create would take up about 85% of the time compared to calling css() (because we don't have to inject the styles a second time)?

from aphrodite.