Why do I need to validate CSS rules

Syntax and writing checks for programming languages can effectively “merge” the “different styles” of different developers and detect grammatical errors. Eslint, for example, validates the “crap” of JS code. CSS is not exactly a “programming language”, but it is not something to be sniffed at in a front-end architecture. CSS is a “style sheet” based on description. If “description” is “chaotic and without rules”, it will be a “time bomb” for other developers 💣 “especially for people with obsessive-compulsive disorder 😊”. CSS seems simple, but it is still quite difficult to write beautiful CSS. Why is CSS so hard to learn? – CSS is not a science, it is an art, so action is needed to validate CSS rules.

Team collaboration encountered problems in CSS writing

Take a look at the following scene:

Xiao Feng: Ok 😨, then why don’t you have a space behind the comma, I look very uncomfortable ah Xiao Jie: I look not uncomfortable good Xiao Feng: 😨😨😨, can you not create an empty CSS file!! …

Whether in the community, MR, ordinary communication, similar scenes emerge in endlessly, this is because the CSS rules are not unified, resulting in the disadvantages of the “tip of the iceberg”

What things need to be checked in CSS

At the pure code level, CSS validation is pretty sparse. For example: attribute order, whether to remove 0 from decimal less than 1, whether to add Spaces between selectors… For example, List of rules lists a lot of rules that need to be verified.

Ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding, ding.

How do I verify CSS rules

First there has to be a rule, and second there has to be a rule. How to comply:

  1. When you submit a Merge Request, manually verify it in the form of Code Review. “It’s stupid. It takes a lot of time. It doesn’t work.”
  2. git commit“(^ – ^)V good~“

Verifies CSS rules using the stylelint

Simple steps

  • Install stylelInt, stylelint-ORDER, and stylelint-config-Standard

npm i --save-dev stylelint stylelint-order stylelint-config-standard

  • Adds the stylelint configuration file

Project root add file.stylelintrc Basic configuration file:

1

2

3

4

5

 {

“extends”: “stylelint-config-standard”,

“plugins”: [],

“rules”: {}

}

For details about the configuration file, please refer to: Click me note: The sorting rules of CSS properties used in the configuration file are provided here

  • Add the related commands to the scripts field of package.json
1

2

3

4

5

 {

“scripts”: {

“lint-css”: “stylelint ‘src/**/*.css’ –fix”,

}

}

NPM run Lint-CSS validates CSS manually. ‘SRC /**/*. CSS’ indicates the path of the CSS file in the glob syntax. –fix to make stylelInt automatically repair CSS code as much as possible

  • Install Lint-staged, Husky

npm i --save-dev lint-staged husky

  • Added lint-staged configuration files

Project root add file.lintStageDRC basic configuration file:

1

2

3

4

5

6

 {

“src/**/*.css”: [

“stylelint –fix”,

“git add”

]

}

This will automatically check the SRC /**/*.css CSS file in stylelint –fix before performing git commit

More ways to use the Stylelint

Stylelint can be used not only in projects, but also in editors such as Sublime Text, which won’t be covered here. Asynchronous read

Write in the last

While there are various tools available to “assist” developers, note that “assist” is not “help”. Because the developers themselves need to know “why” the validation is done, we can’t be “dictated” by the tools, we can “order” the tools to do it. Well, that’s important. Don’t look blank when someone asks you about the benefits of doing this.

· Thanks for reading