This stylelint configuration validates the order of CSS properties according to Logic CSS. It's highly recommended that you use this in addition to your own rules (or rules from a shareable configuration), since it is only concerned with ordering.
The configuration works with both stylelint --fix
and stylefmt to automatically sort your CSS properties.
This package is inspired by Stylelint Concentric Order.
npm install --save-dev stylelint-config-logic-order
Add this configuration to the end of your extends
array inside .stylelintrc
{
"extends": [
// ...some other shareable Stylelint configuration
"stylelint-config-logic-order"
],
"rules": {
// ...your own custom rules and overrides
}
}
Logic CSS doen't really exist, but I havn't found any good name for this ordering logic… I encourage you to see ./src/ index.js
for full order list.
The purpose : order the CSS properties with a certains logic :
When using Sass, @include
and @extend
should be on top, so we directly see what they herited from mixin, placeholder, included styles. It's easier to override them right after. The only exeption are for mediaqueries with @include
, they should be at the end.
Beacause position affect directly the render of the styled component/item, it's on top of the properties. For example, position: absolute
can completly change the CSS flow.
All proporties that the parent induced for the component. Typically: flex
proporties for flex-iems, or self positionning in grid/flex context.
Set the component display method before all other style can avoid miss understaning display when debugging.
Content styles first: fonts styles, paddings, border, background, decorative box elements, margins
Then, all other styles: opacity, cursor,… And to finish transforms and animations.