chenglou / chenglou/RCSS

RCSS rule priority

Open
#20 4 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.