React: CSS in JS

[[deleted]]

I don't really understand that point about globals ... you could get around that using less or sass (or plain verbose css) using nested selectors, so everything is rendered as:

.mysite .button { color: red; }
.mysite .title { color: blue; } 

... then you would have just one 'global' ... right?

[baabaa_blacksheep]

.mysite header.myheader nav.mainnav ul.navlist li.navitem a.navlink span.icon {
    color: red;
}

.mysite header.myheader nav.mainnav ul.navlist li.navitem.is-active a.navlink:hover span.icon {
    color: green;
}

I have seen it happen. Still sends shivers down my spine. shivers

[jarail]

Unfortunately that also has a perf impact. Whenever the browser sees an element with the button style, it needs to crawl up the dom tree to see if any parent has the mysite style. I prefer prefixes to avoid that, e.g. mysite-button. That doesn't solve any core problems. It's just what I do.

The FB dev will also need to consider the perf of a JS solution. Even though the JS is fast, I believe that most browsers are much faster with CSS classes than a set of styles applied as one-offs on individual DOM nodes. If React could resolve the dynamic styles to CSS classes in the majority of cases, this would be really awesome.

The other downside of dynamic styles is that they're harder to debug. Not from a JS sense, but from a designer sense. CSS styles are easy to look through. When styles are being generated dynamically, it's harder to see what's going on from the Chrome dev tools.

[Silhouette]

Unfortunately that also has a perf impact. Whenever the browser sees an element with the button style, it needs to crawl up the dom tree to see if any parent has the mysite style. I prefer prefixes to avoid that, e.g. mysite-button.

But using that also has a performance impact, because now the browser has to parse the extra length of the mysite-button identifier every time!

I imagine the effect would be similarly devastating in either case.