Stylelint Config Readable

"If you want your code to be easy to write, make it easy to read." — Robert C. Martin

The aim of this configuration is to achieve optimal readable code for a large number of projects. In many cases, the easing of the code's looseness in comparison to its compactness is an advantage for this. The idea is that code is much more read than written. Clear and structured code is therefore valuable for each additional author.

The code should appear uniform no matter how many authors are involved. But of course, it is not only about formatting (which could be fully solved with new tools like Prettier) but also about avoiding errors and mentoring developers. As you will see the chosen infrastructure with ESLint as a backbone offers so much more.

There is also the matching ESLint Configuration available.

Features

• Blocks usage of !important.
• Correctly supports typical Sass dialects like @mixin.
• Tolerates normalize PostCSS plugin for automatically cherry-pick required normalization features.
• Tolerates CSS Modules composes feature.
• Tolerates Lost Grid features.
• Checks CSS animation/transition for performance issues.

Formatting

• Use 2 spaces for indention
• 80 characters max line length
• Use lowercase properties, selectors, mixin names, etc. only
• Requires property splitting between layout (position, margin, padding, size) and visuals (appearance, colors, animation)

Usage

Installation with npm:

npm install --save-dev stylelint-config-readable stylelint

Installation with yarn:

yarn add --dev stylelint-config-readable stylelint

Add the preset to your stylelint config e.g. .stylelintrc.yml

extends:
  - stylelint-config-readable

Though this configuration is meant to be usable without any further configuration you are naturally free to extend it and place overrides into your configuration e.g. by extending the rules section:

extends:
  - stylelint-config-readable
rules:
  indentation: 4

Copyright

Copyright 2015-2018
Sebastian Software GmbH