Skip to content

rules-explaination.md

Latest commit

 

History

History
514 lines (325 loc) · 23.9 KB

rules-explaination.md

File metadata and controls

514 lines (325 loc) · 23.9 KB

一. 规则解释

1. 规则的种类

大多数的规则是让你选择你想要什么、禁止什么，如number-leading-zero: string - "always"|"never"

  • No rules

    但是，有少部分包含*-no-*的规则只能禁止。比block-no-empty, 这种规则没值，也没必要有值。

  • Max-min rules

    还有一部分包含*-max/min-*的规则，用于设定一个限制。它的值是int。如：number-max-precision

  • Whitespace rules

    规定用empty line，还是 a single space，还是a newline，还是 no space。

    这类规则的key的关键字是

    • 指定插入位置：before,after,inside

    • 指定插入什么：

      • empty-line, space,newline

    • 指定被插入的对象

      例如function、comment。也可以具体指定他们的更精细位置，如function-comma。

      标点符号还有：comma（逗号）,colon(冒号),semiconlon（分号）,open-brace（左大括号）,closing-brace（右大括号）,opening-parenthesis（左圆括号）,closing-parenthesis（右圆括号）,operator,orange-operator，parentheses(圆括号)

    这类规则的key的组成是：被插入的对象+被插入对象再精细+空白符号类型+插入位置。

    如：function-comma-space-after

2. 规则的组成

  • key的组成

​ the thing + what the rule is checking -> number（数字）-leading-zero（要检验数字的什么）

  • 值的组成

    • 一个option：primary option。

      allow，never，disallow

    • 多个option：

      [primary option, second option(obj)] -> "indentation": ["tab", { "except": ["value"] }]

      awlays-multi-line指的是css多行的时候，才校验。

      • second option
        • except：不包括。
          • after-custom-property
          • first-nested
          • after-declaration
          • after-comment

3. 有趣的

stylelint里面只有empty-line-before，没有empty-line-after，这是因为每个元素都只负责和它前一个元素的距离。

二. 规则罗列

color 颜色规则

  • color-no-invalid-hex 无效的颜色

  • color-named 是否允许用单词作为color的值。比如：red, black等

  • color-no-hex 不允许16进制的颜色

    • error a { color: #000 }

    • right: a { color: black }

字体 font family

方法 function

  • function-calc-no-unspaced-operator calc方法的参数中，操作符前后必须有空白字符

    • error

      a { top: calc(1px+2px); }

    • right

      a { top: calc(1px + 2px); }

  • function-linear-gradient-no-nonstandard-direction

Standard direction 是以下其中一条：

  • 一个角度

  • to + 一个角落(top right) 或者一条边(top、right)

    如：to top、to top right

常见的错误用法是只有角落/边，却没有加to; 或者没有加deg

  • error

    .foo { background: linear-gradient(top, #fff, #000); }

    .foo { background: linear-gradient(to top top, #fff, #000); }

    .foo { background: linear-gradient(45, #fff, #000); }

  • right

    .foo { background: linear-gradient(to top, #fff, #000); }

    .foo { background: linear-gradient(45deg, #fff, #000); }

  • function-blacklist 可以使用的函数黑名单

  • function-whitelist 可以使用的函数白名单

  • function-url-no-scheme-relative 不允许**//**开头的地址

    url scheme - 网络协议，如ftp，http

    A scheme-relative url is a url that begins with // followed by a host.

  • functiton-url-scheme-blacklist 协议黑名单

  • function-url-scheme-whitelist 协议白名单

String

  • String-no-newline 在字符串中不允许空行

Unit

  • unit-no-unknow 不允许未知的单位

    第一选项：true

    第二选项：ignoreUnits: ["/regex/", "string"]

  • unit-blacklist 单位白名单

  • unit-whitelist 单位黑名单

Keyframe

  • keyframe-declaration-no-important: 在keyframe中不允许使用·important

    • error

      @keyframes important1 {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 100px ! important;
  }
}

Declaration 声明

Declaration block

Block

Selector

Selector list

Media feature

Media query list

Rule

At-rule

Comment

General/Sheet

  • no-descending-specificity 不允许选择器权重递减书写

    • error

      .container a {
  top: 10px;
}
a {
  top: 0;
}

    • right

      a {
  top: 0;
}
.container a {
  top: 10px;
}

  • no-duplicate-at-import-rules 不允许重复的导入（@import）

    • error

      @import "a.css";
@import 'a.css';

  • no-duplicate-selectors 不允许重复的选择器

    • error

      a { color: red; }
a { font-size: 12px; }

    • right

      a {
 color: red;
 font-size: 12px;
}

  • no-empty-source 不允许空白字符

    • error \n, \t\t

  • no-extra-semicolons 不允许额外的封号（一个就够了）

  • no-invalid-double-slash-comments 不允许双斜杠注释（因为css中没有双斜杠注释）

Number

  • Number-max-precision 限制小数点的最大精度（小数点后几位）

    若设置为2

    • error a { top: 3.2544px }
    • right a { top: 3.22px }

Time

  • Time-min-milliseconds 能设置的最小毫秒数

Shorthand property

  • shorthand-property-no-redundant-values 缩写的属性值中不允许有冗余的值(能缩写就缩写)。
    • error a { padding: 10px 10px }

Value

  • value-no-vendor-prefix 属性值不允许带有浏览器前缀
    • error a { display: -webkit-flex; }
    • right a { dispaly: flex; }
  • value-keyword-case: 对属性值规定大写或者小写 string: "lower"|"upper"， 建议： lower

Value list

Custom property

  • custom-property-pattern 为自定义属性指定一个格式。

    若设置为"foo-.+"

    • error： root { --boo-bar: 0; }
    • right：:root { --foo-bar: 0; }

  • custom-property-empty-line-before: 在用户自定义属性前面不允许或要求空行

Property

  • property-blacklist 属性key白名单

  • property-whitelist 属性key白名单

  • Property-no-vendor-prefix 属性key不允许有浏览器前缀

  • property-no-unknown 不允许未知的属性

  • property-case: Specify lowercase or uppercase for properties. 规定属性要么大写要么小写， 建议： lower

    Options："lower"，"upper"

General / Sheet