@diesdasdigital/csslint

csslint

Linter for diesdas’ CSS architecture.

CSS rules it checks:

• component name is used on every class as a prefix
• no multiple nesting in class names, eg .component__one__two is ill-formed
• animation names should start with the component name: @keyframes my-component__my-animation { ...
• no type selectors (with the only exception > tag)
• no id selectors

Installation

To install all dependencies run:

yarn add @diesdasdigital/csslint --dev

Then you can run use the linter in package.json or via npx.

{
  "scripts": {
    "lint": "csslint 'src/**/*.css'"
  }
}

Collaboration

If you want to make changes to csslint you need to have the following tools:

or you can use a glob pattern like

yarn start '**/*.css'

Ignoring errors

In your projects root folder, create a file named .csslintignore. The files in there will be ignored.

Alternatively you can ignore a single line by writing the following comment in the previous line:

/* csslint-disable-next-line */

For Development

Requirements

• macOS
• node (we recommend installing it via nvm)
• yarn

Note: all of the following commands should be run in the project’s folder.