preface

Stylelint is a plug-in that regulates CSS. Click in the people should just want to see how to use, the introduction will not write in detail.

1. Configure and use

(1) Install stylelint and its plug-ins through NPM first

npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-scss -D
Copy the code

The plugins used here are:

  1. stylelint

  2. Stylelint-config-standard: Standard rule integration for stylelint official share. These include Google’s CSS Style Guide, Airbnb’s Styleguide, The Idiomatic CSS Principles, and @mdo’s Code Guide. To see the source code defined inside, click here.

  3. Stylelint-order: Plug-in used to regulate the writing order of style attributes.

  4. Stylelint-config-rational – Order: I am currently using the CSS property order rule. Use with the stylelint-Order.

  5. Stylelint-scss: a plug-in used to support validation of SCSS syntax, such as @extend, etc.

More details about the above plugins are described below.

(2) Create the stylelint configuration file in the root directory

The configuration file can be either. Stylelintrc. json or stylelint.config.js. Or you can write it in the stylelint variable of package.json. Stylelintrc. json is used as an example. The configuration file is as follows:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order"
  ],
  "rules": {
    "indentation": 2,
    "no-missing-end-of-source-newline": null,
    "max-nesting-depth": 3,
    "selector-max-compound-selectors": 3,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  },
  "plugins": [
    "stylelint-scss"
  ]
}
Copy the code

A more detailed supplement to extend, rules, and plugins is described below.

(3) install stylelint in vscode

Download the following plug-in in vscode and enable it:

Open setting.json in vscode (file -> preferences -> Settings) and add the following:

// eslint "editor.codeActionsOnSave": {" source.fixall. stylelInt ": true}, // stylelInt configuration "stylelint.enable": true, "css.validate": false, "less.validate": false, "scss.validate": false, "[scss]": { "editor.formatOnSave": false }Copy the code

The configuration of the above content enables automatic repair of parts in styles such as CSS or SCSS in violation of rules defined in.stylelintrc.json, such as indentation, and attribute writing order when the file is pressed CTRL + S. The automatic repair effect is as follows:

(3). Stylelintignore

To protect some files from detection, create a new. Stylelintignore file in the root directory. Such as:

**/*.js
vendor/**/*.css
Copy the code

/* stylelint-disable */ to prevent stylelint from being checked for the file.

Ignoring code

2. Stylelintrc. Json analysis

(1) extends

Extends is mainly used to contain collections of rules, such as stylelint-config-standard.

"extends": [  "stylelint-config-standard",  "stylelint-config-rational-order"]
Copy the code

This has the same purpose as the extends property in the esLint configuration file.eslint.js.

** Off topic: ** Part of the article puts stylelint-config-recommended into extends as follows:

"Extends ": ["stylelint-config-recommended" // This plug-in is not necessary to "stylelint-config-standard"," stylelint-config-Rational - Order "]Copy the code

Stylelint-config-recommended is included in the latest (20.0.0) stylelint-config-standard. See stylelint-config-standard/index.js for details.

Precedence in extends is right-to-left, as in ESLint.

(2) stylelint – config – rational – order

An integration of rules for specifying the writing order of CSS properties. Use with the stylelint-ORDER plug-in. It advocates the following order of writing:

. Declaration -order {/* 1.Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; /* 2.Box Model */ display: block; float: right; width: 100px; height: 100px; margin: 10px; padding: 10px; /* 3.Typography */ color: #888; font: normal 16px Helvetica, sans-serif; The line - height: 1.3; text-align: center; /* 4.Visual attributes */ background-color: #eee; border: 1px solid #888; border-radius: 4px; opacity: 1; /* 5. Transition: all 1s; user-select: none; }Copy the code

A good CSS writing order not only improves readability, but also speeds up the browser’s ability to build render trees.

As we all know, the browser’s rendering flow is:

  1. Parsing HTML files to build dom trees, parsing CSS files to build CSSOM
  2. Combine DOM tree and CSSOM to generate render tree
  3. Layout and Paint based on the render tree

In step 3, when the render tree is generated, the browser iterates through the CSS styles of each tree node starting from the root node (the HTML node) for parsing. During parsing, if a change in the positioning of an element affects the layout. You go back and re-render.

Such as:

.box{ width: 100px; height: 100px; background-color: red; position: absolute; /* When the browser resolves position to absolute and finds that it needs to leave the document flow instead of rendering in the document flow, it will go back and re-render */Copy the code

(3) the rules

Rules are the rules that define CSS, and because they have a higher precedence than extends, they can be used to override the rules that extends includes in the collection.

"rules": {
    "indentation": 2,
    "no-missing-end-of-source-newline": null,
    "max-nesting-depth": 3,
    "selector-max-compound-selectors": 3,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
}
Copy the code

Let’s talk about some of the rules defined above

1.indentation

The unit used to define indentation.

2.no-missing-end-of-source-newline

When true, each section of CSS or SCSS must end with a new empty behavior. Since it wasn’t necessary, and many of the previous styles in the project didn’t use this notation, I just set it to NULL and turned it off.

3. The Max – nesting – the depth and the selector – Max – compound – selectors

Both are used to limit the depth, but one is to limit the nesting depth of & characters in SCSS, and the other is to limit the depth of selectors. Click the link below to see the Stylelint document:

max-nesting-depth

selector-max-compound-selectors

Because CSS selectors match from right to left. Therefore, too deep a CSS selector can also lead to a long time to build the render tree. And the readability is poor, so I set my own depth threshold.

4. The at – rule – no – unknown and SCSS/ats – rule – no – unknown

When the value of at-rule-no-unknown is true, a large number of its styles are written in SASS language. Some syntax, such as @extend, will report an error because it is not the syntax of CSS. So I set at-rule-no-unknown to NULL.

SCSS /at-rule-no-unknown is a rule in the stylelint-SCSS plug-in. If @extend is incorrectly written as @exend, the stylelint will report an error because of this rule.