RCSS rule priority
- Dominant language
- JavaScript
- Stars
- 284
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
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](http://css-tricks.com/specifics-on-css-specificity/)).
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](https://github.com/reactjs/react-future/blob/master/04%20-%20Layout/Inline%20Style%20Extension.md), 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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with RCSS.createClass and the issue's CSS specificity examples, then review the linked inline-style proposal. Determine whether RCSS should address precedence and which workaround is acceptable; done requires an agreed approach rather than the current open-ended discussion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100