Openlibrary: Stylelint: Add no-descending-specificity and fix offenders
From the stylelint docs:
"Source order is important in CSS, and when two selectors have the same specificity, the one that occurs last will take priority. However, the situation is different when one of the selectors has a higher specificity. In that case, source order does not matter: the selector with higher specificity will win out even if it comes first.
The clashes of these two mechanisms for prioritization, source order and specificity, can cause some confusion when reading stylesheets. If a selector with higher specificity comes before the selector it overrides, we have to think harder to understand it, because it violates the source order expectation. "
Stylelint (which can be run by using npm install && npm run lint:fix) can detect these if configured with the following:
"no-descending-specificity": true,
Note: there are currently lots of offenders for this rule, so it may be worth waiting until master.less is more manageable (#1092) before attempting this
Checklist
- [ ] Update .stylelintrc.json
- [ ] fix any offenders detected via
npm run lint:fix
jdlrobson
All 9 comments
Better to have sooner rather than later... will work on this if nobody else does.
jdlrobson
on 28 Sep 2018
This ones also going to be a bit tricky. There are lots of offenders :-S
jdlrobson
on 5 Oct 2018
Hey @jdlrobson! I'd like to help out with this if you still need it.
thefifthisa
on 13 Oct 2018
We do! Go for it @thefifthisa !
jdlrobson
on 13 Oct 2018
@jdlrobson Great, thanks! Can I know which ones you've already done so I know where to start?
thefifthisa
on 13 Oct 2018
@thefifthisa I'd recommend to start with adding the rule to the existing stylelint config file and making sure you can see the errors locally when you run
npm install
npm run lint:fix
I'm seeing lots of errors when I add this rule.
Let's keep the first pull request small and reasonably safe from merge conflicts! As a general rule, I'd recommend disabling the rule at the top of large files which have more than 6 errors [1]. (e.g. static/css/components/header-bar.less and static/css/legacy.less) and focusing on the files which have less problems.
The goal with this linting is to slowly chip away at the CSS and improve it so don't take too much on at a time - focus on the files with 1-6 issues! Otherwise, it will make it harder for you to write and others to review.
Does this make sense?
Let me know if any more guidance needed!
[1] Adding the following line at the top of the file will stop the rule from applying there!
/* stylelint-disable no-descending-specificity */
@jdlrobson Got it, just submitted a PR!
thefifthisa
on 16 Oct 2018
I just want a t-shirt
JonathanArias510
on 18 Oct 2018
this can be closed... no-descending-specificity is in the codebase thanks to @thefifthisa :)
jdlrobson
on 8 Nov 2018
Related issues
skylerbunny
·
4Comments
dcapillae
·
4Comments
cdrini
·
4Comments
cdrini
·
5Comments
cdrini
·
4Comments
Most helpful comment
I just want a t-shirt