When you write a lot of CSS code, you may experience more than one error. Some tool may be needed to prevent your CSS writing errors.
Maybe, sometimes your mistake is really a bug. It is also possible that inconsistencies or unclear code styles are caused simply by hasty. Maybe many of them seem trivial (depending on your personality), but as the code base grows and time accumulates, many people will make ugly things when using them. The consequences of things are not something you can imagine.
You try to control yourself. Your colleagues also help you when you are free to correct your mistakes in a timely manner. However, you and your colleagues are both the maker of mistakes, so in the end, they are inevitably failures at least to a certain extent. Later, you or others will solve the problem caused by CSS errors on your page.
Neither you nor your colleagues like to discuss the mistakes you made because it is embarrassing. It can even be frustrating or emotionally ruptured at times. A certain specification is sometimes helpful for the maintenance of the code base, such as a consistent writing style, which may seem a bit pedantic and boring when executed manually. Otherwise they will show the elements of your usual love to show off and stubbornness.
In addition, you may prefer to correct errors in a timely manner instead of waiting for the code to be reviewed and others to point out the errors, and modify them yourself and declare that you will not have such errors again. When your CSS error occurs, a timely feedback will help you save a lot of time.
What you need is a machine that prevents errors
You need a machine that prevents errors from happening, can understand CSS and understand you: your intentions, preferences, ideas, and weaknesses.
Such machines will have limitations. Everything is not perfect. But this limitation is different from you and your colleagues. As long as it can prevent errors, it will continue to prevent them, working tirelessly. At the same time, you and your colleagues can always improve the machine, expand its functionality and weaken its limitations. It is open source, and people all over the world can join in and do their part--other authors who want to stop themselves from having CSS writing errors.
Like others, CSS authors need linters
We call these programs that prevent errors "linters". There are several better linters in Javascript. ESLint in particular, it works miraculously, showing us that a good linter is so useful. But in CSS we are not so lucky, our choices are very limited: Ruby-based scss-lint with special preprocessors and earlier CSS Lint.
But this was all before PostCSS appeared. In addition, PostCSS provides some methods to build more interactive CSS tools. It can parse any CSS class syntax into an abstract syntax tree (AST) plugin for analysis and operation. And with a custom parser, PostCSS can even handle irregular invalid patterns (such as // comments)
Maturity conditions can already produce a linter with more powerful features -- powered by PostCSS and inspired by the best features of scss-lint and ESLint.
I worked with a few friends on this project, and now I will start introducing the tools we developed: stylelint.
Things you can do with stylelint
The following is a summary of the functions tried in stylelint, with more than 100 rules and scalability.
At this point, if you find yourself getting a little impatient ("Ok,Ok: I believe stylelint will have miraculous work effects. No need for too much summary."). Just skip to the next section, here I'm just explaining some issues and giving some tips.
Error capture
Some stylelint rules are designed to identify obvious mistakes, such as spelling errors or omissions created by your upset or bleary eyes. For example, you can disable blank blocks, invalid hexadecimal values, duplicate selectors, unnamed animation names and wrong linear gradient syntax.
The other rules are to try your best to catch more subtle mistakes. Here is a rule: When you use shorthand properties (such as margin ) that can override their properties peers (such as margin-top ), a warning will be issued because this may be caused by your negligence. In addition, there is another rule that warns you: when a chaos occurs, if rule A appears before rule B, but actually covers rule B, because the selector of rule A has a higher priority (for example, rule A is .foo.bar{・・・} and rule B is .foo{・・・} ). This is a very difficult situation.
There is also a rule that uses the PostCSS doiuse plugin to check whether your browser supports this style. Another one uses the css-colorguard plugin to prompt for color similarity to avoid confusing your use. (Please note: This is one of the main advantages of stylelint based on PostCSS: compared to other PostCSS plug-ins, stylelint can prompt with little effort.)
Enforce best practices
If you use system methods in your stylesheets, or have a style guide for your code, you should ban these patterns. stylelint already provides these features.
First, you need to control your selector hard. With stylelint, you can disable selectors that exceed a certain specificity or set limits on nesting depth. You can disable category selectors (such as selectors without ids) and use regular expressions to naming conventions for the rest of them.
You can ban the use of !important , or browser hacks that your browser does not support. If you use Autoprefixer (or you should), you can disable the use of vendor prefixes in the source stylesheet.
If you want to be more rigorous -- you can spend some time on configuration to ensure absolute consistency -- you can enforce the order of stylesheet properties and provide properties, values, functions, and units for blacklists and whitelists.
Execute code style conventions
stylelint has conventions to automatically execute code styles, so you and your teammates don't need to actively set it up. We are committed to making these rules more comprehensive and flexible.
These rules are mainly aimed at spaces, but also for other details, such as quotation marks, upper and lower case letters, writing zeros before decimals, using keywords, spelling out values, etc.
Dreaming that you and your teammates can establish a format convention (for example, we always leave a space after declaring a colon) and modify it in your stylelint configuration, and you won't discuss it again after that. Let it be executed in the machine kingdom.
Develop and expand everything
Nicholas Zakas, the creator of ESLint (and CSS Lint), wrote about the success of ESLint lies in its scalability. stylelint attempts to follow ESLint's lead and provides CSS authors with a linter, which is also extensible.
You can write and publish your own rules plugin. Now we have a lot of things to use; and we are eager to see other people's excellent plugins.
The configuration is extensible and therefore can be shared. As for plugins, we learned about the value of this feature from ESLint. Check that includes WordPress and SUITCSS configurations and have been published.
If you don't like the built-in tips of stylelint, you can create your own style by hand, or even create it for your organization. You can also customize the rules used to provide warning messages.
Using the stylelint API, you can create plugins for text compilers and perform tests to make stylelint incorporate into every aspect of your workflow.
If you have ideas about stylelint extensions, please let us know!
Answers to expected questions
There may be several questions in your mind. Here are a few of the most common explanations:
Is it possible to use stylelint in SCSS or Less?
The answer is yes, you can use stylelint in SCSS and it is supported in Less too! Since PostCSS allows custom parsers, stylelint can easily support a wide variety of non-standard syntaxes - you can customize a PostCSS parser for parsing.
Because of PostCSS parser--Stylelint supports SCSS, Less and the new SugarSS. If you want to implement another custom syntax support, you can do it with PostLess!
Of course, there are certain rules that are bound to your non-standard syntax (such as #{$interpolation} in the Sass id selector). Because stylelint tries to cover up the style of our stylesheets - some people use standard CSS, some people use extended languages such as SCSS, some people use weird custom properties, etc. - These will inevitably create some vulnerabilities that need to be filled. However, we have been dealing with these errors we found; any rules during this period can be completely closed or disabled in a row-by-row stylesheet or in a row-by-row style.
Is stylelint able to use future CSS syntax?
Yes! Similar to the answer mentioned above: stylelint can understand anything PostCSS understands, including enabling any future CSS syntax (probably through PostCSS plugin). In fact, some stylelint rules specifically deal with future CSS syntax and some custom properties.
The stylelint configuration is huge, where should I start?
We recommend three configuration methods:
Extend a published configuration. We maintain stylelint-configuration standards to facilitate the user to provide an inherent benchmark. And many configurations have been announced. Start from scratch and add one rule at a time. By default, no rule is turned on, so by adding the rules manually you will know which one will be enforced and you can understand each rule you add. Start the copy-paste configuration, decide which options to use and selectively delete.
Thankfully, you don't need to write a huge stylelint configuration over and over again. You can choose a style you like and you can use it anywhere.
The easiest way to run stylelint?
For most people, the easiest way is through its command line.
If you prefer gulp plugin, you can use gulp-stylelint. For webpack, there are many possibilities for choice. We hope these plugins will inspire you to create other stylelint plugins, such as those for Grunt. (You can search in open source projects!)
You can also run stylelint using the PostCSS plugin, including whatever is included in the plugin. This means you can use stylelint anywhere you can use PostCSS (which covers almost every compilation tool)!
In addition, there is also a stylelint text compilation plugin for Atom, Sublime Text, VS Code to provide the fastest feedback. For more information, please refer to the list of complementary tools on the stylelint website.
As shown below, on the command line, the results you are expecting to see:
Show as follows in Atom;
Can stylelint fix my error?
No, but another one called stylefmt is designed to do this. It requires a stylelint configuration - very similar to what you use in linting - and can fix any errors. We hope that as the community staff contributes, stylelint can evolve to automatically patch errors that violate stylelint rules. Please help them achieve this goal!
You can also use other tools such as CSScomb or perfectlist used in conjunction with stylelint to automatically fix and automatically force rest.
Use linting for constraint supplementation
There are huge amounts of constraints in good CSS. That's why we spend a lot of time discussing methods such as SMACSS, ACSS, BEM, SUITCSS, ITCSS, etc. We all know that writing bad CSS is very easy, so if we are no longer afraid of CSS-style writing, we need to establish an intelligent strategy at work and bravely stick to it.
The goal of stylelint is to automate execution – providing a set of core rules and a pluggable framework that CSS authors can use to execute their own strategies.
Let's give it a try and let us know how to serve you. If you have related better improvement ideas, such as contribution rules, enhancements, testing, fix bugs, files, new ideas or just feedback, please give us a message! This way, all our developers at all levels have work to do.