3分钟入门 StyleLint
前言
先看下常见的CSS规范
通用约定
选择器的嵌套层级应不大于 3 级
无继承关系时，使用属性缩写
存在继承关系时，使用分拆方式
根据规则条数选择缩写和拆分
属性书写顺序
布局方式、位置 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
尺寸 相关属性包括：border / margin / padding / width / height 等
文本相关 相关属性包括：font / line-height / text-align / word-wrap 等
视觉效果 相关属性包括：background / color / transition / list-style 等
包含 content 属性，放在最前面
尽量不使用 !important 声明
z-index
在可控环境下，期望显示在最上层的元素，z-index 指定为 999999
在第三方环境下（不可控），期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647
省略嵌入式资源协议头
省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。
省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）
值与单位
- 文本内容用双引号包围
- 当数值为 0 - 1 之间的小数时，省略整数部分的 0
- opacity: .8
- 长度为 0 时省略单位
- padding: 0 5px;
- 颜色值
- RGB颜色值使用十六进制记号形式
- border-color: #008000;
- 可以缩写时，使用缩写形式
- background-color: #aca;
- 颜色值不允许使用命名色值
- color: lightgreen;
- 颜色值中的英文字符采用小写
- background-color: #aca;
- 2D 位置同时给出水平和垂直方向的位置
- RGB颜色值使用十六进制记号形式
文本编排
- font-family
- 字体族名称应使用字体的英文
- 字体族名称应使用字体的英文
- 需要在 Windows 平台显示的中文内容，其字号应不小于 12px（小于 12px 的文字显示效果极差、难以辨认）
- font-weight 属性使用数值方式描述
- font-family
兼容性
- 带私有前缀的属性由长到短排列，按冒号位置对齐
- 带私有前缀的属性由长到短排列，按冒号位置对齐
下面说下如何约束这些CSS规范吧
介绍
StyleLint 是一个强大的、现代化的 CSS 检测工具, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。
使用
安装 运行工具 stylelint
npm install -d -save-dev stylelint
安装 stylint-config-standard 和 stylelint-order
stylint-config-standard 推荐配置
stylelint-order CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)
npm install stylelint-config-standard stylelint-order --save-dev
配置规则文件
package.json中的stylelint属性.stylelintrc文件不带扩展名可以是 JSON 或 YAML 格式的。（或者添加一个文件扩展名：.stylelintrc.json，.stylelintrc.yaml，.stylelintrc.js）stylelint.config.js文件输出的 JS 对象
以上三种文件，按顺序只会有一个文件生效，将该文件进行解析，使用解析后的对象
配置对象 rules
规则决定检测器要查找什么和要解决什么 所有规则必须显式的进行配置，没有配置就是不检测
rules属性是个对象，其键为规则名称，值为规则配置。每个规则配置符合以下形式之一：
- 一个值 (主要选项)
- 包含两个值的数组 (
[primary option, secondary options]) null关闭规则，true使用规则，always要求符合，never禁止符合，int整数
{
"rules": {
"block-no-empty": null, // 不检测 禁止出现空块 规则
"color-no-invalid-hex": true, // 禁止使用无效的十六进制颜色
"max-empty-lines": 2,
"rule-nested-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
}],
"unit-whitelist": ["em", "rem", "%", "s"]
}
}
每个 rule 都必须有一个主要选项，辅助选项可以解决边缘情况 常用的辅助选项关键词有：
"ignore"忽略特定模式"except"反转特定模式的主要选项
运行
stylelint 'src/*.css' 检测 src 文件下所有 .css 文件
stylelint "**/*.{css,scss,sass}" 检测所有 .css，.scss 和 .sass文件
stylelint "**/*.css" "!**/docker/**" 检测 .css 除 docker 子文件夹中的文件以外的所有文件
关于规则
规则命名
- 由连字符分隔的小写单词组成。
- 分为两部分：
- 第一部分是介绍该规则适用于什么。
- 第二部分描述了规则检查的内容。
"number-leading-zero"
// ↑ ↑
// 适用于数字 检查的内容是 前导零
规则分类
是否要求或禁止某些内容
number-leading-zero: string - "always"|"never"
"always"必须始终 有一个前导零"never"绝不能 有领先的零
不允许某些事情 *-no-*
block-no-empty: true块不能为空。
a { }
/** ↑
* Blocks like this */
最大限制*-max-*
number-max-precision: int
a { font-size: 1.333em; }
/** ↑
* 指定 "." 之后的最大位数 */
空白规则
空格规则允许您指定在样式表的某个特定部分中是否必须使用空行，单个空格，换行符或无空格。
空白规则组合了两组关键字：
before，after和inside用于指定其中空白（如果有的话）的预期。
empty-line，space和newline用于指定是否单个空行，一个单一的空间，单个换行或没有空间预期在那里。
例如，指定样式表中的所有注释之前是否必须包含单个空行或没有空格：
comment-empty-line-before:string-"always"|"never"
a {}
←
/* comment */ ↑
↑
/** ↑
* This empty line */
在规则中使用正则表达式
以下规则类别支持正则表达式
*-allowed-list*-disallowed-list*-pattern
"selector-class-pattern": "^[a-z][a-zA-Z0-9]+$"
规则列表
传送门
规则插件
stylelint-csstree-validator：验证 CSS 的值是否匹配 W3C 标准和浏览器扩展。stylelint-declaration-strict-value：指定变量($sass，@less，var(--cssnext))，函数 或自定义的 CSS 关键字(inherit，none等) 的属性是否必须用来做它 的值。stylelint-declaration-use-variable：指定哪个变量的属性必须用作它的值stylelint-order：指定排序，比如声明的块内(插件包)属性的顺序。stylelint-rscss：验证 RSCSS约定。stylelint-scss：执行各种各样的 SCSS语法特性检测规则(插件包)stylelint-selector-bem-pattern: 为选择器指定 BEM 模式(合并了 postcss-bem-linter)。
本文使用 mdnice 排版
