Make the things that make our products look pretty, look pretty!
Using !important
is very bad practise. Please do not do it.
If you run stylelint in your project, and you are presented with an enormous amount of errors because of !importants,
please do not add a eslint-disable-next-line
or disable the rule for entire files.
Instead, overwrite the declaration-no-important rule in your .stylelintrc
in the project, and set the severity to warning.
We have extended stylelint-config-clean-order
which is a config for stylelint-order
. This package does what you expect it to do.
In our own config we've overwritten the sorting of just the selectors (blocks). Since regular expressions are a bit hard to read sometimes, here's the sorting as we've configured it:
.parentClass {
@media #{$normal} {
}
&:hover {
}
&__foo {
}
&--bar {
}
&.active {
}
div {
}
.childClass {
}
}