@thibaudcolas/stylelint-config-cookbook

Shareable stylelint config for CSS and SCSS, with a strict baseline

Usage no npm install needed!

<script type="module">
  import thibaudcolasStylelintConfigCookbook from 'https://cdn.skypack.dev/@thibaudcolas/stylelint-config-cookbook';
</script>

README

@thibaudcolas/stylelint-config-cookbook

npm Build Status

Shareable stylelint config for CSS and SCSS, with a strict baseline

Usage

Install stylelint and the config:

npm install --save-dev stylelint @thibaudcolas/stylelint-config-cookbook

Then configure stylelint to use this config. As a stylelint.config.js in the root of your project:

module.exports = {
  // https://github.com/thibaudcolas/stylelint-config-cookbook
  extends: "@thibaudcolas/stylelint-config-cookbook",
};

Tips

Related tools

To get the most out of this config, it is assumed that projects have the following tools set up:

Conventions

The overarching principle behind this config is to make it simpler to maintain stylesheets in large-scale projects. This means:

  • Support for large-scale CSS architectures like ITCSS.
  • Mandatory reusable values (via variables and functions) for properties that impact the overall consistency of the UI, e.g. colors and attributes of fonts.
  • A low maximum specificity, to prevent abuse of the CSS cascade (or altogether discourage usage of styles overrides beyond single components).
  • Blanket ban of CSS/SCSS features that make it harder to maintain stylesheets – id selectors (never), element selectors (max 1), nested properties, etc).

Rules

Cookbook config

Rules of stylelint-config-standard

Disabled rules

Rules that are turned off on purpose.

Unused rules

Rules that are not configured.