Stylelint Configuration Packages Compared: stylelint-config-recommended vs stylelint-config-standard vs stylelint-config-sass-guidelines

When setting up a CSS or Sass codebase, choosing the right Stylelint configuration can save hours of bikeshedding and enforce consistent, maintainable styles. The three packages — stylelint-config-recommended, stylelint-config-standard, and stylelint-config-sass-guidelines — serve different purposes and target different audiences. Let’s break down what each does, how they differ technically, and when to use which.

🧱 Core Philosophy: What Each Config Enforces

stylelint-config-recommended

This is the minimal, safe baseline provided by the official Stylelint team. It only turns on rules that avoid errors — like invalid syntax or deprecated features — but doesn’t enforce stylistic preferences.

// .stylelintrc.json using stylelint-config-recommended
{
  "extends": ["stylelint-config-recommended"]
}

It includes rules such as:

• color-no-invalid-hex
• function-calc-no-invalid
• unit-no-unknown

But it does not include rules about spacing, ordering, or naming conventions.

stylelint-config-standard

This builds directly on top of stylelint-config-recommended and adds opinionated stylistic rules based on common community practices. Think of it as the “Prettier for CSS” — it enforces consistent formatting and structure.

// .stylelintrc.json using stylelint-config-standard
{
  "extends": ["stylelint-config-standard"]
}

It enables everything from recommended, plus rules like:

• declaration-block-trailing-semicolon
• indentation
• string-quotes
• selector-list-comma-newline-after

This config assumes you’re writing standard CSS (or PostCSS-compatible syntax) and want predictable, readable output.

stylelint-config-sass-guidelines

This config is specialized for Sass (SCSS) projects and enforces rules aligned with the popular Sass Guidelines project. It focuses on Sass-specific best practices, including nesting depth, variable naming, and mixin usage.

// .stylelintrc.json using stylelint-config-sass-guidelines
{
  "extends": ["stylelint-config-sass-guidelines"]
}

It includes rules like:

• scss/at-rule-no-unknown (for Sass @mixin, @include, etc.)
• max-nesting-depth (defaults to 3)
• scss/dollar-variable-pattern (enforces $kebab-case)
• scss/selector-no-redundant-nesting-selector

Note: This package depends on stylelint-scss plugin and won’t work properly without it.

🔌 Plugin Dependencies and Syntax Support

Each config has different assumptions about your tooling stack.

• stylelint-config-recommended: Works out of the box with vanilla CSS. No plugins required.
• stylelint-config-standard: Also works with plain CSS. Uses built-in Stylelint rules only.
• stylelint-config-sass-guidelines: Requires stylelint-scss to understand Sass-specific syntax. Without it, you’ll get false positives or crashes.

If you try to use stylelint-config-sass-guidelines on a plain CSS project, you’ll see errors like:

Unknown rule scss/at-rule-no-unknown

To fix this, install the plugin:

npm install --save-dev stylelint-scss

And ensure your config includes it:

{
  "plugins": ["stylelint-scss"],
  "extends": ["stylelint-config-sass-guidelines"]
}

⚙️ Rule Overlap and Extensibility

All three configs are designed to be extended. But their inheritance chains differ:

• stylelint-config-standard extends stylelint-config-recommended internally. So if you use standard, you automatically get all recommended rules.
• stylelint-config-sass-guidelines does not extend either. It’s a standalone config focused purely on Sass conventions.

This means:

• If you use both standard and sass-guidelines, you must manage potential rule conflicts manually.
• A common pattern for SCSS projects is to combine recommended + sass-guidelines, skipping standard because some of its rules (like quote style) may conflict with Sass conventions.

Example hybrid config for a modern SCSS codebase:

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-sass-guidelines"
  ],
  "plugins": ["stylelint-scss"],
  "rules": {
    "scss/dollar-variable-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$"
  }
}

🛠️ Real-World Usage Scenarios

Scenario 1: Plain CSS Project (e.g., legacy app or utility-first)

• ✅ Best choice: stylelint-config-standard
• Why? You get error prevention + consistent formatting without extra setup.

Scenario 2: Modern SCSS Codebase Following Sass Guidelines

• ✅ Best choice: stylelint-config-sass-guidelines + stylelint-config-recommended
• Why? You need Sass-aware linting, and recommended covers basic CSS validity.

Scenario 3: Minimal Linting (e.g., design system consumed by others)

• ✅ Best choice: stylelint-config-recommended
• Why? You only care about correctness, not style — consumers may have their own formatting rules.

⚠️ Important Notes on Maintenance

As of the latest verified documentation:

• All three packages are actively maintained and compatible with Stylelint v15+.
• None are deprecated.
• stylelint-config-sass-guidelines explicitly states it’s intended for SCSS syntax only (not indented Sass).

📊 Summary Table

💡 Final Recommendation

• Start with stylelint-config-recommended if you only want to catch bugs.
• Upgrade to stylelint-config-standard if you’re writing plain CSS and want consistent style.
• Use stylelint-config-sass-guidelines (with stylelint-scss) if your project uses SCSS and you follow Sass architecture best practices.

Don’t mix standard and sass-guidelines unless you’ve audited for rule conflicts. In most Sass projects, recommended + sass-guidelines gives you the cleanest, most targeted linting experience.