The standard shareable config for stylelint
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


NPM version Build Status Build status

The standard shareable config for stylelint.

Extends stylelint-config-recommended.

Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.

Use it as is or as a foundation for your own config.

To see the rules that this config uses, please read the config itself.


@import url(x.css);
@import url(y.css);

 * Multi-line comment

.selector-3[type="text"] {
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
  box-sizing: border-box;
  display: block;
  color: #333;

.selector-b:not(:first-child) {
  padding: 10px !important;
  top: calc(calc(1em * 2) / 3);

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

@media (min-width >= 60em) {
  .selector {
    /* Flush to parent comment */
    transform: translate(1, 1) scale(3);

@media (orientation: portrait), projection and (color) {
  .selector-i + .selector-ii {
    background: color(rgb(0, 0, 0) lightness(50%));
    font-family: helvetica, "arial black", sans-serif;

/* Flush single line comment */
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  .selector {
        #fff 25px,
        rgba(255, 255, 255, 1) 50px
    margin: 10px;
    margin-bottom: 5px;
      0 1px 1px #000,
      0 1px 0 #fff,
      2px 2px 1px 1px #ccc inset;
    height: 10rem;

  /* Flush nested single line comment */
  .selector::after {
    content: '';
    background-image: url(x.svg);

Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.


npm install stylelint-config-standard --save-dev


If you've installed stylelint-config-standard locally within your project, just set your stylelint config to:

  "extends": "stylelint-config-standard"

If you've globally installed stylelint-config-standard using the -g flag, then you'll need to use the absolute path to stylelint-config-standard in your config e.g.

  "extends": "/absolute/path/to/stylelint-config-standard"

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]

Suggested additions

stylelint-config-standard is a great foundation for your own config. You can extend it to create a tailored and much stricter config:

Using the config with SugarSS syntax

The config is broadly compatible with SugarSS syntax. You will need to turn off the rules that check braces and semicolons, as so:

  "extends": "stylelint-config-standard",
  "rules": {
    "block-closing-brace-empty-line-before": null,
    "block-closing-brace-newline-after": null,
    "block-closing-brace-newline-before": null,
    "block-closing-brace-space-before": null,
    "block-opening-brace-newline-after": null,
    "block-opening-brace-space-after": null,
    "block-opening-brace-space-before": null,
    "declaration-block-semicolon-newline-after": null,
    "declaration-block-semicolon-space-after": null,
    "declaration-block-semicolon-space-before": null,
    "declaration-block-trailing-semicolon": null