RCSS rule priority

[charliermarsh]

I've been experimenting with converting a large LESS-based webapp to RCSS (or, at least, converting a few React components). One problem I've run into several times is that RCSS classes are pretty low in terms of style precedence. In other words, if I convert a single React component to RCSS, there are often some lingering LESS selectors with higher priority that negate a lot of changes (to make things worse, the larger the nesting, the higher the priority of the selector, per CSS-tricks).

As a work-around, I've had to utilize "!important" in an ugly way, so much so that I've considered adding an "auto-!important" option to RCSS.createClass that simply appends "!important" to every rule.

For illustrative purposes, it's also worth considering this proposal, where they apply styles inline, rather than through CSS classes, which immediately skirts around this issue of precedence.

It'd be good to have a discussion about whether or not this merits addressing (in a fully-RCSSified webapp, it wouldn't really be a problem) and what the potential workarounds might be. Intuitively, adding "auto-!important" actually seems weirdly reasonable, given that adding an RCSS class to a React component is such a deliberate move that it should be considered the most important styling.

[chenglou]

Ugh, my knee-jerk reaction is no to auto-!important. I'll give more thoughts about it.
Applying style inline should be possible. Except I goofed up the initial API and now there's this unrelated className key in your object. The new API might solve this? #11. Again, I'll think more about it.

[charliermarsh]

Yeah, I don't like !important either--it's clearly a hack. The new API looks good and would certainly solve some of these problems.

[chenglou]

facebook/react#1881
^ gonna see what happens to that issue next.

[charliermarsh]

Makes sense. I think we can just leave this issue be if we support using the style object inline (which we do now).