3 minutes introduction to StyleLint

Official document: Stylelint. IO/User-guide

preface

Take a look at the common CSS specifications

  • General agreement

    • Selectors should have no more than 3 levels of nesting

    • Attribute abbreviations are used when there is no inheritance relationship

    • When inheritance relationship exists, use split mode

    • Select abbreviations and splits based on the number of rules

    • Attribute writing order

      • The layout and position-related attributes include position, top, right, bottom, left, float, display, and overflow

      • Size attributes include border/margin/padding/width/height, etc

      • Text-related attributes include: font/line-height/text-align/word-wrap

      • Visual attributes include background/color/transition/list-style

      • Contains the content property first

    • Try not to use! Important statement

    • z-index

      • In a controlled environment, the z-index is specified as 999999 for the element expected to be displayed at the top level

      • In a third-party environment (uncontrollable), expect to display the uppermost element inline with the tag and! Important, set z-index to 2147483647

    • Omit the embedded resource protocol header

      • Omit URL protocol header declarations such as images, media files, style sheets, and scripts (HTTP:, HTTPS:). If the URLS are not those two declarations, they are not omitted.

      • Omit protocol declaration, make URL relative address, prevent content confusion and cause small files to download repeatedly (this mainly refers to HTTP and HTTPS hybrid scenarios)

  • Value and unit

    • The text content is enclosed in double quotation marks
    • When the value is a decimal between 0 and 1, the 0 part of the integer is omitted
      • opacity: .8
    • If the length is 0, the unit is omitted
      • padding: 0 5px;
    • Color value
      • RGB color values are in hexadecimal notation
        • border-color: #008000;
      • Use abbreviations when possible
        • background-color: #aca;
      • Color values do not allow named color values
        • color: lightgreen;
      • The English characters in the color value are lowercase
        • background-color: #aca;
      • The 2D position gives both horizontal and vertical positions

  • Text layout

    • font-family
      • Font family names should use the English language of the font
    • The font size of Chinese content to be displayed on Windows platform should not be less than 12px (text smaller than 12px will have poor display effect and is difficult to read).
    • The font-weight attribute is described numerically

  • compatibility

    • Attributes with private prefixes are arranged from long to short, aligned by colon position

How do I constrain these CSS specifications

introduce

StyleLint is a powerful, modern CSS detection tool that helps us avoid errors in style sheets by defining a series of coding style rules.

use

Install the run tool stylelint

npm install -d -save-dev stylelint
Copy the code

Install stylint-config-standard and stylelint-Order

Stylint-config-standard Recommended to configure the stylelint-Order CSS attribute sorting plug-in (write the location first, then the box model, then the content area style, and finally CSS3 attributes)

npm install stylelint-config-standard stylelint-order --save-dev
Copy the code

Configuration rule file

  • package.jsonIn thestylelintattribute
  • .stylelintrcThe file can be in JSON or YAML format without an extension. (Or add a file extension:.stylelintrc.json..stylelintrc.yaml..stylelintrc.js)
  • stylelint.config.jsFile output JS object

Only one file of the preceding three types of files takes effect in sequence. The file is parsed and the parsed object is used

Configuring Object Rules

Rules determine what the detector looks for and resolves and all rules have to be explicitly configured, if you don’t configure, you don’t detect, right

The rules property is an object whose key is the rule name and value is the rule configuration. Each rule must be configured in one of the following ways:

  • One value (main option)
  • An array of two values ([primary option, secondary options])
  • nullTurn off the rule,trueRules of use,alwaysThe requirements are met,neverProhibit conformity,intThe integer
{
    "rules": {
        "block-no-empty": null.// Do not detect the rule forbidding empty blocks
        "color-no-invalid-hex": true.// Disallow invalid hexadecimal colors
  
 "max-empty-lines": 2. "rule-nested-empty-line-before": ["always", {  "except": ["first-nested"]. "ignore": ["after-comment"] }]. "unit-whitelist": ["em"."rem"."%"."s"]  } } Copy the code

Each rule must have one primary option. Secondary options can be used to resolve edge cases.

  • "ignore"Ignore specific patterns
  • "except"The main option to reverse a particular pattern

run

Stylelint ‘SRC /*.css’ Detects all.css files in SRC files stylelint “**/*.{CSS, SCSS,sass}” detects all.css, SCSS and.sass files stylelint “**/*.css” “! **/docker/**” checks.css for all files except those in the docker subfolder

About the rules

Rules for naming

  • Consists of lowercase words separated by hyphens.
  • Divided into two parts:
    • The first part describes what the rule applies to.
    • The second part describes the content of rule checking.
"number-leading-zero"
/ / write write
// The content applicable to the number check is the leading zero
Copy the code

Rules of the classification

Whether something is required or prohibited

number-leading-zero: string - "always"|"never"

  • "always"There must always be a leading zero
  • "never"There must be no leading zeros

Don’t allow certain things*-no-*

  • block-no-empty: trueBlocks cannot be empty.
a {   }
/ * * write * Blocks like this */
Copy the code

Maximum limit*-max-*

  • number-max-precision: int
A {the font - size: 1.333 em. }/ * * write* specified"."The largest number of digits after */Copy the code

Space rules

The whitespace rule allows you to specify whether a blank line, a single space, a newline, or no space must be used in a particular part of the stylesheet.

The blank rule combines two sets of keywords:

Before, after, and inside are used to specify expectations for gaps, if any. Empty-line, space, and newline are used to specify whether a single empty line, a single space, a single newline, or no space is expected there.

For example, specify whether all comments in a stylesheet must be preceded by a single empty line or no Spaces:

  • comment-empty-line-before: string – "always"|"never"
a {}
              ←
/* comment */ ↑
              ↑
/ * * write * This empty line */ Copy the code

Use regular expressions in rules

The following rule categories support regular expressions

  • *-allowed-list
  • *-disallowed-list
  • *-pattern
"selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
Copy the code

List of rules

portal

Stylelint. IO/user guide /…

Rules of the plugin

  • Stylelint-csstree – Validator: Verifies that the CSS values match W3C standards and browser extensions.
  • stylelint-declaration-strict-value: Specifies a variable ($sass.@less.var(--cssnext)), functions or custom CSS keywords (inherit.noneEtc.) must be used to make its value.
  • Stylelint-declaration-use-variable: specifies which variable’s property must be used as its value
  • Stylelint-order: Specifies ordering, such as the order of declared in-block (plug-in package) attributes.
  • Stylelint-rscss: Verifies the RSCSS convention.
  • Stylelint-scss: Performs a wide variety of SCSS syntax feature detection rules (plug-in package)
  • Stylelint-selector -bem-pattern: Specifies the BEM pattern for the selector (incorporating postCSs-bem-linter).

This article is formatted using MDNICE