benhigham@benhigham/stylelint-config
My personal Stylelint configuration for maintaining consistent, high-quality CSS/SCSS code.
Features
This configuration:
- Extends
stylelint-config-standard-scssfor SCSS support and best practices - Uses
stylelint-config-recess-orderfor consistent property ordering - Enforces strict value usage for colors, font-sizes, and z-indices
- Prevents performance issues with animations
- Requires proper use of custom media queries and nesting
- Enforces BEM naming conventions with SUIT CSS methodology
- Ensures browser compatibility with Baseline requirements
- Detects and prevents indistinguishable colors and out-of-gamut colors
- Provides special handling for CSS modules
Installation
# npm
npm install --save-dev @benhigham/stylelint-config
# yarn
yarn add --dev @benhigham/stylelint-config
# pnpm
pnpm add --save-dev @benhigham/stylelint-configUsage
Create a stylelint.config.js file in your project root and extend this configuration:
/** @type {import('stylelint').Config} */
export default {
extends: ['@benhigham/stylelint-config'],
};Configuration Details
Extended Configs
stylelint-config-standard-scss: Provides standard rules for SCSS filesstylelint-config-recess-order: Enforces a consistent property ordering based on the Recess methodology
Plugins
This configuration includes several plugins:
stylelint-declaration-block-no-ignored-properties: Prevents using ignored or overridden propertiesstylelint-declaration-strict-value: Enforces the use of variables, functions or custom CSS for specific propertiesstylelint-high-performance-animation: Prevents using low-performance animation propertiesstylelint-media-use-custom-media: Enforces the use of custom media queriesstylelint-use-nesting: Enforces proper CSS nestingstylelint-plugin-use-baseline: Disallow CSS features not in Baselinestylelint-no-unresolved-module: Ensures all imported modules can be resolvedstylelint-no-indistinguishable-colors: Prevents colors that are too similarstylelint-gamut: Prevents colors outside of supported gamut rangestylelint-selector-bem-pattern: Enforces BEM naming conventionstylelint-no-unsupported-browser-features: Warns about unsupported browser features
Key Rules
- Browser Compatibility: Enforces only widely supported CSS features
- SCSS Best Practices: Limits nesting depth, enforces consistent naming patterns
- BEM Pattern: Uses SUIT CSS methodology for class naming
- CSS Modules: Special handling for
.module.scssfiles with relaxed naming rules
License
This project is licensed under the MIT License.