stylelint — css書寫規范

sass lint guidance

一、安裝：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
}
}
八、配置文件說明

屬性名	屬性值	描述
[color-hex-case](http://stylelint.io/user-guide/rules/color-hex-case/)	lower	顏色值為小寫字母
[color-no-invalid-hex](http://stylelint.io/user-guide/rules/color-no-invalid-hex)	true	顏色值不能為無效值
[at-rule-name-space-after](http://stylelint.io/user-guide/rules/at-rule-name-space-after)	always	@xx 后需空格
[at-rule-semicolon-new-new-line](http://stylelint.io/user-guide/rules/at-rule-semicolon-new-new-line)	alway	@xx 分號后要換行
[function-calc-no-unspaced-operator](http://stylelint.io/user-guide/rules/function-calc-no-unspaced-operator)	true	方法中的計算符號左右需空格
[function-comma-space-after](http://stylelint.io/user-guide/rules/function-comma-space-after)	always	方法中逗號后需空格
[function-linear-gradient-no-nonstandard-direction](http://stylelint.io/user-guide/rules/function-linear-gradient-no-nonstandard-direction)	true	linear-gradient()內參數嚴格按照css規范
[function-max-line-lines](http://stylelint.io/user-guide/rules/function-max-line-lines)	0	方法中參數允許0行空行
[function-parentheses-newline-inside](http://stylelint.io/user-guide/rules/function-parentheses-newline-inside)	never-multi-line	方法中參數允許逗號后換行
[function-url-quotes](http://stylelint.io/user-guide/rules/function-url-quotes)	always	地址一定要寫引號
[function-whitespace-after](http://stylelint.io/user-guide/rules/function-whitespace-after)	always	方法之間一定要空格
[number-leading-zero](http://stylelint.io/user-guide/rules/number-leading-zero)	never	數字不以0開頭。錯誤：0.5；正確：.5
[number-no-trailing-zeros](http://stylelint.io/user-guide/rules/number-no-trailing-zeros)	true	不能有數字末尾多余的0。錯誤：1.000；正確：1
[string-no-newline](http://stylelint.io/user-guide/rules/string-no-newline)	true	字符串之前不能有“\n"
[string-quotes](http://stylelint.io/user-guide/rules/string-quotes)	double	字符串最外層用雙引號，而不是單引號
[unit-case](http://stylelint.io/user-guide/rules/unit-case)	lower	單位小寫
[unit-no-unknown](http://stylelint.io/user-guide/rules/unit-no-unknown)	true	不允許未知的單位
[value-keyword-case](http://stylelint.io/user-guide/rules/value-keyword-case)	lower	屬性值小寫
[value-list-comma-newline-after](http://stylelint.io/user-guide/rules/value-list-comma-newline-after)	always-multi-line	屬性值列不允許逗號前換行
[value-list-comma-space-after](http://stylelint.io/user-guide/rules/value-list-comma-space-after)	always	屬性值列表逗號后需空格
[shorthand-properyu-no-redundat-values](http://stylelint.io/user-guide/rules/shorthand-properyu-no-redundat-values)	true	可簡寫的屬性不重復寫，錯誤：margin: 1px 1px;
[declaration-bang-space-after](http://stylelint.io/user-guide/rules/declaration-bang-space-after)	never	!important中！后不空格
[declatation-bang-space-before](http://stylelint.io/user-guide/rules/declatation-bang-space-before)	always	!important中！前空一格
[declatation-colon-space-after](http://stylelint.io/user-guide/rules/declatation-colon-space-after)	always	屬性名冒號后空一格
[declatation-colon-space-before](http://stylelint.io/user-guide/rules/declatation-colon-space-before)	never	屬性名冒號前不空格
[declatation-block-no-ignored-properties](http://stylelint.io/user-guide/rules/declatation-block-no-ignored-properties)	true	禁止那些由於在同一規則的另一個屬性值忽略的屬性值。
[declaration-block-no-shorthand-property-overrides](http://stylelint.io/user-guide/rules/declaration-block-no-shorthand-property-overrides)	true	錯誤：border-top-width: 1px; border: 2px solid blue;
[declaration-block-semicolon-newline-after](http://stylelint.io/user-guide/rules/declaration-block-semicolon-newline-after)	always-multi-line	一個模塊要么整個模塊一行顯示，要么分號后分行顯示
[declaration-block-semicolon-space-after](http://stylelint.io/user-guide/rules/declaration-block-semicolon-space-after)	always-single-line	屬性之間分號后空一格或換行
[declaration-block-semicolon-newline-before](http://stylelint.io/user-guide/rules/declaration-block-semicolon-newline-before)	never-multi-line	分號前不允許換行
[declaration-block-semicolon-space-before](http://stylelint.io/user-guide/rules/declaration-block-semicolon-space-before）	never	分號前不允許空格
[declaration-block-trailing-semicolon](http://stylelint.io/user-guide/rules/declaration-block-trailing-semicolon)	always	模塊內最后一個屬性必須有分號
[block-no-empty](http://stylelint.io/user-guide/rules/block-no-empty)	true	不允許模塊內為空
[block-opening-brace-space-after](http://stylelint.io/user-guide/rules/block-opening-brace-space-after)	always-single-line	模塊單行時“{”后空一格
[block-opening-brace-space-before](http://stylelint.io/user-guide/rules/block-opening-brace-space-before)	always	“{”前空一格
[block-closing-brace-space-before](http://stylelint.io/user-guide/rules/block-closing-brace-space-before)	always-single-line	模塊單行時“}”前空一格
[selector-attribute-brackets-space-inside](http://stylelint.io/user-guide/rules/selector-attribute-brackets-space-inside)	always	“[”后空一格，“]”前空一格
[selector-attribute-operator-space-after](http://stylelint.io/user-guide/rules/selector-attribute-operator-space-after)	always	“[]”內的“=”后空一格
[selector-attribute-operator-space-before](http://stylelint.io/user-guide/rules/selector-attribute-operator-space-before)	always	“[]”內的“=”前空一格
[selector-combinator-space-after](http://stylelint.io/user-guide/rules/selector-combinator-space-after）	always	選擇器后空一格，例如：ul> li
[selector-combinator-space-before](http://stylelint.io/user-guide/rules/selector-combinator-space-before)	always	選擇器前空一格，例如：ul >li
[selector-max-compound-selectors](http://stylelint.io/user-guide/rules/selector-max-compound-selectors)	4	最多4層選擇器
[selector-no-universal](http://stylelint.io/user-guide/rules/selector-no-universal)	true	不允許通用選擇器*
[selector-pseudo-class-case](http://stylelint.io/user-guide/rules/selector-pseudo-class-case)	lower	偽類選擇器小寫（：hover之類）
[selector-pseudo-class-no-unknown](http://stylelint.io/user-guide/rules/selector-pseudo-class-no-unknown)	true	不允許css規范外的偽類選擇器（：hover之類）
[selector-pseudo-element-case](http://stylelint.io/user-guide/rules/selector-pseudo-element-case)	lower	偽類選擇器小寫（：: before之類）
[selector-pseudo-element-no-unknown](http://stylelint.io/user-guide/rules/selector-pseudo-element-no-unknown)	true	不允許css規范外的偽類選擇器（：: before之類）
[selector-type-case](http://stylelint.io/user-guide/rules/selector-type-case	lower	標簽選擇器小寫
[selector-max-empty-lines](http://stylelint.io/user-guide/rules/selector-max-empty-lines)	0	選擇器共用一個模塊，選擇器之間允許0行空白
[selector-list-comma-newline-before](http://stylelint.io/user-guide/rules/selector-list-comma-newline-before)	never-multi-line	選擇器共用一個模塊，選擇器之間要么一行，要么逗號后換行
[selector-list-comma-space-after](http://stylelint.io/user-guide/rules/selector-list-comma-space-after)	always-single-line	選擇器共用一個模塊，選擇器一行時，逗號后空一格
[rule-nested-empty-line-before](http://stylelint.io/user-guide/rules/rule-nested-empty-line-before)	never	嵌套規則前不空行
[media-query-list-comma-newline-before](http://stylelint.io/user-guide/rules/media-query-list-comma-newline-before)	always-single-line	媒體查詢列表中不允許逗號之前換行
[media-query-list-comma-space-after](http://stylelint.io/user-guide/rules/media-query-list-comma-space-after)	always-single-line	媒體查詢列表中單行逗號之后空一格
[comment-whitespace-inside](http://stylelint.io/user-guide/rules/comment-whitespace-inside)	always	注釋符之間空格。錯誤：/*\* haha \*/；正確：/\* haha \*/
[max-empty-lines](http://stylelint.io/user-guide/rules/max-empty-lines)	1	內容之間最多允許1行空白行
[max-nesting-depth](http://stylelint.io/user-guide/rules/max-nesting-depth)	4	sass中允許嵌套的深度為4
[no-descending-specificity](http://stylelint.io/user-guide/rules/no-descending-specificity)	true	選擇的同一元素，不允許權重較輕的選擇器出現在權重較重的之后
[no-duplicate-selectors](http://stylelint.io/user-guide/rules/no-duplicate-selectors)	true	一個樣式表不允許相同的選擇器出現
[no-empty-source](http://stylelint.io/user-guide/rules/no-empty-source)	true	樣式表不允許為空
[no-eol-whitespace](http://stylelint.io/user-guide/rules/no-eol-whitespace)	true	樣式表末尾不允許空行
[no-extra-semicolons](http://stylelint.io/user-guide/rules/no-extra-semicolons)	true	不允許多余的分號
[no-invalid-double-slash-comments](http://stylelint.io/user-guide/rules/no-invalid-double-slash-comments)	true	不允許//注釋
[no-unknown-animations](http://stylelint.io/user-guide/rules/no-unknown-animations)	true>	animation的name不能是keyframes沒有定義的