css-styleguide

CSS styleguide

CSS styles (including flavours like SCSS, Sass or Less) can be hard to keep consistend in a project team with mixed experiences and fluctuating members.

Beteween the available flavours I favour BEM css style, due to its well defined rules and wide adoption

Tools

stylelint allows linting of CSS files and most common flavours.

It can be integrated into the development setup and finds support in most common IDEs, e.g.:

• VSCode
• IntelliJ
• Atom

Getting started

npm install stylelint stylelint-config-standard stylelint-selector-bem-pattern --save-dev
# or
yarn add --dev stylelint stylelint-config-standard stylelint-selector-bem-pattern

Configuration

// .stylelintrc
{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "...": "custom other rules"
  }
}

see:

• User guide for an overview of availables rules, plugins and usage examples
• Rules for an overview of default rules

Usage examples

Run manually using the CLI:

yarn stylelint 'src/**/*.scss'

I also recommend adding stylelint to either developers or Git workflow, e.g.: defining a husky pre-push hook

{
  ...
  "hooks": {
    "pre-push": "stylelint 'src/**/*.scss'"
  }
}

ADR

• ADR-0008 - Use linter for CSS