Stylelint Configs: Standard vs Sass Guidelines vs Recess Order

When scaling CSS across a large team, consistency becomes just as important as functionality. stylelint-config-standard, stylelint-config-sass-guidelines, and stylelint-config-recess-order offer different approaches to enforcing this consistency. Each package targets a specific layer of CSS health — from syntax correctness to preprocessor architecture and property ordering. Let’s break down how they differ and where each fits in a modern workflow.

🎯 Core Focus: Errors vs Architecture vs Order

stylelint-config-standard focuses on correctness.

• It prevents syntax errors and impossible values.
• It does not enforce property order or specific architecture.

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

stylelint-config-sass-guidelines focuses on preprocessor architecture.

• It limits nesting depth and enforces variable usage.
• It requires the stylelint-scss plugin to parse Sass syntax.

// .stylelintrc.json for sass-guidelines
{
  "extends": ["stylelint-config-sass-guidelines"],
  "plugins": ["stylelint-scss"]
}

stylelint-config-recess-order focuses on declaration order.

• It sorts properties alphabetically or by logical groups.
• It requires the stylelint-order plugin to enforce sorting.

// .stylelintrc.json for recess-order
{
  "extends": ["stylelint-config-recess-order"],
  "plugins": ["stylelint-order"]
}

🛠️ Setup and Dependencies

Each config brings different dependencies. Knowing what you need to install prevents broken builds.

stylelint-config-standard is mostly standalone.

• It works with core Stylelint rules.
• No extra plugins are required for basic setup.

# Install for standard
npm install --save-dev stylelint stylelint-config-standard

stylelint-config-sass-guidelines requires SCSS parsing.

• You must install stylelint-scss to handle Sass syntax.
• Without it, Stylelint will fail on variables or mixins.

# Install for sass-guidelines
npm install --save-dev stylelint stylelint-config-sass-guidelines stylelint-scss

stylelint-config-recess-order requires ordering logic.

• You must install stylelint-order to check property sequence.
• It adds overhead to linting but ensures visual consistency.

# Install for recess-order
npm install --save-dev stylelint stylelint-config-recess-order stylelint-order

🚫 Rule Enforcement: What Gets Flagged

The value of a linter lies in what it catches. Here is how each config handles common CSS issues.

stylelint-config-standard catches invalid values.

• It flags typos in property names or unsupported values.
• It ensures cross-browser compatibility basics.

/* stylelint-config-standard flags this */
.element {
  colr: red; /* Error: Unknown property */
  margin: 10px 20px 30px 40px 50px; /* Error: Too many values */
}

stylelint-config-sass-guidelines catches architectural drift.

• It flags deep nesting that hurts maintainability.
• It warns against using color literals instead of variables.

/* stylelint-config-sass-guidelines flags this */
.component {
  .child {
    .grandchild {
      .great-grandchild { /* Error: Nesting depth exceeded */
        color: #fff; /* Error: Color literal used */
      }
    }
  }
}

stylelint-config-recess-order catches unordered properties.

• It flags declarations that break the sorted sequence.
• It ensures display comes before position, etc.

/* stylelint-config-recess-order flags this */
.element {
  color: red;
  display: block; /* Error: Property order violation */
  background: blue;
}

🤝 Compatibility with Formatters

Running a linter alongside a code formatter like Prettier can cause conflicts. Each config handles this differently.

stylelint-config-standard often conflicts with Prettier.

• Prettier may format CSS differently than Stylelint expects.
• Teams often use stylelint-config-prettier to disable conflicting rules.

// Common combo for standard
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ]
}

stylelint-config-sass-guidelines has fewer conflicts.

• Sass-specific rules rarely overlap with Prettier’s CSS logic.
• Focus is on structure rather than whitespace.

// Common combo for sass-guidelines
{
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-prettier"
  ]
}

stylelint-config-recess-order conflicts directly with Prettier.

• Prettier does not enforce property order by default.
• You must choose between Prettier’s formatting or Stylelint’s order.

// Warning: Do not combine with stylelint-config-prettier
{
  "extends": ["stylelint-config-recess-order"]
}

📊 Summary Table

💡 Final Recommendation

Your choice depends on your stack and team priorities.

stylelint-config-standard is the safe default for most projects. It prevents errors without imposing strict style rules. Use this if you want reliability without friction.

stylelint-config-sass-guidelines is essential for Sass-heavy codebases. It enforces architectural rules that prevent spaghetti code in preprocessors. Use this if you rely on variables, mixins, and nesting.

stylelint-config-recess-order is for teams that value visual consistency above all. It removes debates about property order during code reviews. Use this if you want strict sorting and are willing to disable Prettier for CSS.

Final Thought: You can combine these configs if needed. For example, use stylelint-config-standard as a base, then add stylelint-config-recess-order for sorting. Just ensure your plugin dependencies are installed and conflicts are managed.