CSS Code Style
配置
安装 stylelint
npm install --save-dev stylelint stylelint-config-vusion
然后创建.stylelintrc
文件:
编辑器配置
VSCode
使用插件 vscode-stylelint
/* stylelint配置 */"stylelint.enable": true,"css.validate": false,"scss.validate": false,
目录
说明:
- 语气:强制 > 要求 == !禁止 > 尽量 > 推荐 == !不推荐;
- 🔧表示 StyleLint 可以使用自动修复。
空白
要求使用4个空格作为缩进,禁止使用 Tab 🔧
/* ✗ bad *//* ✓ good */
禁止空文件
/* ✗ bad */\/* ✓ good */
要求文件末尾有且只有一个空行 🔧
no-missing-end-of-source-newline
禁止连续出现多个空行 🔧
/* ✗ bad */ /* ✓ good */
禁止出现空行
custom-property-empty-line-before, function-max-empty-lines, value-list-max-empty-lines, declaration-empty-line-before 🔧, TODO:规则没开 rule-empty-line-before, at-rule-empty-line-before🔧
/* ✗ bad */ @ /* ✓ good */
禁止行尾出现空格
要求分号、逗号、冒号之前没有空格,之后必须有一个空格。@规则分号后另起一行
declaration-block-semicolon-newline-before, declaration-block-semicolon-space-after, declaration-block-semicolon-space-before 🔧, at-rule-semicolon-newline-after🔧, at-rule-semicolon-space-before, selector-list-comma-newline-after, selector-list-comma-newline-before, selector-list-comma-space-after, selector-list-comma-space-before🔧, value-list-comma-newline-after, value-list-comma-newline-before, value-list-comma-space-after, value-list-comma-space-before, function-comma-newline-after, function-comma-newline-before, function-comma-space-after, function-comma-space-before, media-query-list-comma-newline-after, media-query-list-comma-newline-before, declaration-colon-newline-after, media-query-list-comma-space-after, media-query-list-comma-space-before, declaration-colon-newline-after, declaration-colon-space-after, declaration-colon-space-before, media-feature-colon-space-after, media-feature-colon-space-before
/* ✗ bad */{}; /* ✓ good */{};
禁止在小括号(伪类选择器、函数、媒体查询)和中括号(属性选择器)内加空格,要求在大括号(块)内边缘加一个空格,括号之间加一个空格
selector-attribute-brackets-space-inside, selector-pseudo-class-parentheses-space-inside, function-parentheses-space-inside, media-feature-parentheses-space-inside, function-whitespace-after
/* ✗ bad */[{}/* ✓ good */[{}
要求块在独立的行,大括号前不能有空行,必须要有空格
block-closing-brace-empty-line-before, block-closing-brace-newline-after,
block-closing-brace-space-before, block-opening-brace-newline-after, block-opening-brace-newline-before, block-opening-brace-space-after, block-opening-brace-space-before🔧
/* ✗ bad *//* ✓ good */
不允许出现空块
/* ✓ bad *//* ✓ good */
属性操作符周围不加空格,计算函数、媒体查询等其它操作符要加空格
selector-attribute-operator-space-after, selector-attribute-operator-space-before, media-feature-range-operator-space-after, media-feature-range-operator-space-before, function-calc-no-unspaced-operator
/* ✗ bad */[{}/* ✓ good */[{}
要求选择器之间必须有空格,但不能有多余的空格
selector-combinator-space-after🔧, selector-combinator-space-before🔧, selector-descendant-combinator-no-non-space
/* ✗ bad *//* ✓ good */
!
前必须加一个空格,后面不加
要求declaration-bang-space-after, declaration-bang-space-before,
大小写
要求@规则,选择器的标签、伪类、伪元素,属性、关键值、单位、函数名、颜色值、媒体查询均小写
at-rule-name-case🔧, selector-type-case, selector-pseudo-element-case, selector-pseudo-class-case, property-case, value-keyword-case, unit-case, function-name-case, color-hex-case, media-feature-name-case
/* ✗ bad */@{}
/* ✓ good */;{}
分号
块结尾也使用分号,禁止多余的分号
declaration-block-trailing-semicolon🔧, no-extra-semicolons
/* ✗ bad */;;/* ✓ good */;
引号
统一使用双引号
要求属性选择器中的值必须添加引号
/* ✗ bad */[/* ✓ good */[
要求url必须添加引号
字体为多个单词时必须使用引号
/* ✗ bad *//* ✓ good */
选择器
要求伪元素使用两个冒号
selector-pseudo-element-colon-notation🔧
/* ✗ bad *//* ✓ good */
要求规则之间没有降级特性
/* ✗ bad *//* ✓ good */
属性
每行最多定义2个属性
declaration-block-single-line-max-declarations
/* ✗ bad *//* ✓ good */
尽量简写属性
declaration-block-no-redundant-longhand-properties, shorthand-property-no-redundant-values🔧
/* ✗ bad *//* ✓ good */
禁止简写属性覆盖展开写法的属性
declaration-block-no-shorthand-property-overrides
/* ✗ bad *//* ✓ good */
值
要求有前导0,禁止有尾随0
number-leading-zero, number-no-trailing-zeros
为0数字不带单位
数字最多保留6位小数
/* ✓ bad */ /* ✓ good */
颜色尽可能使用名称,尽可能使用缩写的十六进制
/* ✗ bad */ /* ✓ good */
linear-gradient()
中的方向属性值必须符合标准语法
function-linear-gradient-no-nonstandard-direction
/* ✗ bad *//* ✓ good */
注释
要求注释必须有内容,且符号和内容之间有一个空格或空行
comment-whitespace-inside comment-no-empty
/* ✗ bad *//**//**//*comment*//* ✓ good *//* comment *//** Multi-line Comment**/
禁止双斜线的注释
no-invalid-double-slash-comments
/* ✗ bad *//* ✓ good */
低级错误
禁止出现重复的属性、选择器、@import、字体名
declaration-block-no-duplicate-properties, no-duplicate-selectors, no-duplicate-at-import-rules, font-family-no-duplicate-names
/* ✗ bad */;;/* ✓ good */;
禁止出现未知的@规则,选择器标签、伪类、伪元素,属性、单位、颜色值,媒体查询,动画
at-rule-no-unknown, selector-pseudo-class-no-unknown, selector-pseudo-element-no-unknown, selector-type-no-unknown, property-no-unknown, unit-no-unknown, color-no-invalid-hex, media-feature-name-no-unknown, no-unknown-animations
/* ✗ bad */@{}
/* ✓ good */;{}@
禁止字符串换行
/* ✗ bad *//* ✓ good */
要求字体结尾必须添加通用词
font-family-no-missing-generic-family-keyword
/* ✗ bad *//* ✓ good */
keyframe 中禁止添加 important
keyframe-declaration-no-important
/* ✗ bad */@}/* ✓ good */@}