Stylelint-config-semantic-order NPM

Stylelint Config Semantic Order

GitHub Workflow Status

Opinionated stylelint config order semantically grouping related css properties.

Installation

NPM

npm i -D stylelint-config-semantic-order

Yarn

yarn add -D stylelint-config-semantic-order

Usage

Add stylelint-config-semantic-order your Stylelint config extends:

{
  "extends": "stylelint-config-semantic-order"
}

Learn more about Stylelint.

Rationale

We aim for understandable, scannable and consistent code without changing the specificity. A logical ordering of rules and declarations allows you to “scan” quickly.

Properties

Properties with the largest impact (scope and/or importance) are put first. Using concepts from both Idiomatic CSS and ITCSS we setup our config by:

Ordering on impact\ Rules with a larger scope or more effect on the layout and box size have more impact on the UI. Seeing rules with more impact first increases understanding.
Grouping by relationship\ Grouping all properties related to typography and theming makes them easier to find.