Enforcing CSS Quality and Consistency with Stylelint Configs
stylelint-config-recommended, stylelint-config-standard, stylelint-config-sass-guidelines, and stylelint-config-idiomatic-order are shared configuration packages for Stylelint, a powerful CSS linter. These packages allow developers to avoid writing hundreds of rules from scratch by extending established sets of best practices. stylelint-config-recommended and stylelint-config-standard are official packages maintained by the Stylelint team, focusing on error prevention and community style conventions respectively. The other two are community-driven solutions targeting specific needs like Sass syntax enforcement or CSS property ordering.
npm下载趋势
GitHub Stars 排名
统计详情
Stylelint Configs Compared: Baselines, Sass, and Property Order
When setting up a CSS linter, writing every rule by hand is inefficient. Shared configurations like stylelint-config-recommended, stylelint-config-standard, stylelint-config-sass-guidelines, and stylelint-config-idiomatic-order solve this by bundling proven rule sets. However, they serve different purposes — from basic error catching to strict structural enforcement. Let's break down how they differ and which one fits your architecture.
🛡️ Core Philosophy: Error Catching vs Style Enforcement
The most fundamental split is between catching invalid code and enforcing style preferences.
stylelint-config-recommended focuses strictly on validity.
- It turns on rules that catch syntax errors.
- It avoids opinions on spacing, naming, or order.
- This prevents broken CSS without arguing about tabs vs spaces.
// .stylelintrc.json
{
"extends": ["stylelint-config-recommended"]
}
stylelint-config-standard adds community style conventions.
- It includes everything from the recommended config.
- It adds rules for formatting, like indentation and empty lines.
- This ensures code looks consistent across the team.
// .stylelintrc.json
{
"extends": ["stylelint-config-standard"]
}
🎯 Specialized Needs: Sass Syntax and Property Order
Once you have a baseline, you might need rules for specific tools or strict ordering.
stylelint-config-sass-guidelines targets Sass projects.
- It enforces rules specific to Sass syntax, like nesting depth.
- It prevents overly complex mixins or deeply nested selectors.
- You must install the
stylelint-scssplugin alongside this config.
// .stylelintrc.json
{
"extends": ["stylelint-config-sass-guidelines"],
"plugins": ["stylelint-scss"]
}
stylelint-config-idiomatic-order targets property sorting.
- It forces CSS properties into a logical order (e.g., positioning first).
- It relies on the
stylelint-orderplugin to check sequence. - This improves readability but can be strict during refactoring.
// .stylelintrc.json
{
"extends": ["stylelint-config-idiomatic-order"],
"plugins": ["stylelint-order"]
}
⚙️ Configuration Overhead and Dependencies
Each package brings different setup requirements.
stylelint-config-recommendedandstylelint-config-standardare official. They work out of the box with core Stylelint. No extra plugins are needed for the base rules.stylelint-config-sass-guidelinesrequires external tooling. You must manage thestylelint-scssplugin version yourself. If the plugin updates, you might need to adjust your config.stylelint-config-idiomatic-orderalso requires external tooling. You needstylelint-order. Since this is a community package, check that it supports your version of Stylelint to avoid peer dependency warnings.
🚧 Maintenance and Compatibility
Official packages generally offer better long-term stability.
stylelint-config-recommended and stylelint-config-standard are maintained by the Stylelint core team.
- They update quickly when new Stylelint versions release.
- They are safe choices for long-term projects.
- You can trust they won't break unexpectedly.
stylelint-config-sass-guidelines and stylelint-config-idiomatic-order are community maintained.
- Updates depend on volunteer contributors.
- They may lag behind major Stylelint updates (like v14 or v15).
- Always test them in your CI pipeline before locking them in.
📊 Summary Table
| Package | Focus | Dependencies | Maintenance | Best For |
|---|---|---|---|---|
recommended | Validity Only | None | Official | Legacy code, flexible teams |
standard | Validity + Style | None | Official | New projects, consistency |
sass-guidelines | Sass Patterns | stylelint-scss | Community | Large Sass codebases |
idiomatic-order | Property Order | stylelint-order | Community | Strict readability standards |
💡 Final Recommendation
Start with stylelint-config-standard for most modern web projects. It gives you error protection and sensible defaults without extra setup. If you use Sass heavily, layer stylelint-config-sass-guidelines on top — but test for compatibility first. Avoid stylelint-config-idiomatic-order unless your team specifically demands property sorting, as it adds friction during code changes. For maximum stability, stick to the official configs maintained by the Stylelint team.
如何选择: stylelint-config-recommended vs stylelint-config-standard vs stylelint-config-sass-guidelines vs stylelint-config-idiomatic-order
- stylelint-config-recommended:
Choose
stylelint-config-recommendedif you want to catch syntax errors and invalid CSS without enforcing any specific style preferences. This is ideal for teams migrating legacy codebases where strict formatting rules would cause too many conflicts. It provides a safe baseline that ensures code validity while leaving design decisions entirely up to your team. You get protection against mistakes without the noise of style complaints. - stylelint-config-standard:
Choose
stylelint-config-standardif you want a balanced setup that catches errors and enforces common community style conventions out of the box. This package builds on the recommended config by adding rules for formatting, such as indentation and max-empty-lines. It is suitable for new projects where you want to adopt widely accepted practices without debating every rule. This reduces setup time and ensures consistency across different developers. - stylelint-config-sass-guidelines:
Choose
stylelint-config-sass-guidelinesif your project relies heavily on Sass and you need to enforce specific preprocessing best practices. This config includes rules for nesting depth, mixin usage, and other Sass-specific patterns that standard configs ignore. It requires thestylelint-scssplugin to function correctly. Use this when maintaining a large Sass codebase where structure and scalability are critical concerns. - stylelint-config-idiomatic-order:
Choose
stylelint-config-idiomatic-orderif enforcing a specific CSS property order is a priority for your team's readability standards. This package extends the standard config and adds rules via thestylelint-orderplugin to sort properties logically. However, verify compatibility with your Stylelint version before adopting, as community maintenance varies. It is best for teams that value strict structural consistency over flexibility.
热门对比
stylelint-config-recommended的README
stylelint-config-recommended
The recommended shareable config for Stylelint.
It turns on most of the Stylelint rules that help you avoid errors.
You can use this as a foundation for your own config, but we suggest most people use our standard config instead which extends this config and adds a few more rules to enforce common conventions.
Installation
npm install stylelint-config-recommended --save-dev
Usage
Set your stylelint config to:
{
"extends": "stylelint-config-recommended"
}
Extending the config
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, turn off the block-no-empty rule, and add the unit-allowed-list rule:
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["extends"]
}
],
"block-no-empty": null,
"unit-allowed-list": ["em", "rem", "s"]
}
}