stylelint — css书写规范

一、安装：npm intsall -g stylelint

二、配置：http://stylelint.io/user-guide/rules/ (以下规则文件配置一个即可，置于项目根目录下)

1. “.stylelintrc”
   {
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

2. “stylelint.config.js”
   module.exports = {
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

3. “package.json”
   {
   ......
   "stylelint": {
   "rules": {
   "color-hex-case": "lower"
   }
   }
   }

三、官网给出的标准配置：

1. 本地安装： npm install stylelint-config-standard
2. 在配置文件“.stylelintrc”中配置
   {
   "extends": "stylelint-config-standard"
   }
3. 添加或修改标准配置中的内容
   {
   "extends": "stylelint-config-standard",
   "rules": {
   "declaration-block-trailing-semicolon": null
   }
   }

四、使用命令行：stylelint doc/text.css

五、使用gulp自动监听检查 https://github.com/olegskl/gulp-stylelint

1. 本地安装gulp： npm install gulp

2. 创建package.json文件：npm init

3. 本地安装gulp-stylelint： npm install gulp-stylelint --save-dev

4. 创建gulpfile.js
   var gulp = require("gulp");
   var gulpStyleLint = require("gulp-stylelint");

    gulp.task('lint-css', function lintCssTask() {
    	gulp.watch("css/*.css", ["lint-css"]);
    	return gulp
    		.src("css/*.css")
    		.pipe(gulpStyleLint({
    			reporters: [
    				{formatter: 'string', console: true}
    			]
    	}));
    });
   
    gulp.task("default", ["lint-css"]);
   

六、其他

1. 在样式之前标注“/* stylelint-disable */”，可忽略配置的规则；标注“/* stylelint-enable */“，开启配置的规则
2. “/* stylelint-enable */“必须在“/* stylelint-disable */”之后使用
3. 忽略指定的内容：
   （1）.stylelintrc
   {
   "rules": {
   "unit-no-unknown": [true, ignoreUnits:["xxx"]]
   }
   }
   （2）package.json && stylelint.config.js
   {
   "rules": {
   "at-rule-no-unknown": [true, {"ignoreAtRules": ["function", "if", "return", "include", "extend", "mixin", "else", "while", "for", "each"]}]
   }
   }

七、配置文件
1.
{
"rules": {
"color-hex-case": "lower",
"color-no-invalid-hex": true,
"at-rule-name-space-after": "always",
"at-rule-semicolon-newline-after": "always",
"at-rule-no-unknown": [true, ignoreAtRules: ["function", "if", "return", "include", "extend", "mixin", "else", "while", "for", "each"]],
"function-comma-space-after": "always",
"function-linear-gradient-no-nonstandard-direction": true,
"function-url-quotes": "always",
"function-whitespace-after": "always",
"number-leading-zero": "never",
"number-no-trailing-zeros": true,
"string-no-newline": true,
"string-quotes": "double",
"unit-case": "lower",
"unit-no-unknown": true,
"value-keyword-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always",
"shorthand-property-no-redundant-values": true,
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never",
"declaration-block-no-ignored-properties": true,
"declaration-block-no-shorthand-property-overrides": true,
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"declaration-block-trailing-semicolon": "always",
"block-no-empty": true,
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"block-closing-brace-space-before": "always-single-line",
"selector-attribute-brackets-space-inside": "always",
"selector-attribute-operator-space-after": "always",
"selector-attribute-operator-space-before": "always",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-max-compound-selectors": 4,
"selector-no-universal": true,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-max-empty-lines": 0,
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-after": "always-single-line",
"rule-nested-empty-line-before": "never",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"comment-whitespace-inside": "always",
"max-empty-lines": 1,
"max-nesting-depth": 4,
"no-descending-specificity": true,
"no-duplicate-selectors": true,
"no-empty-source": true,
"no-eol-whitespace": true,
"no-extra-semicolons": true,
"no-invalid-double-slash-comments": true,
"no-unknown-animations": true
}
}
八、配置文件说明