3 We have taken great care to consistently name rules.
5 The rules have been designed to work in conjunction with one another so that strict conventions can be enforced.
9 - Made of lowercase words separated by hyphens.
10 - Split into two parts:
11 - The first describes what [*thing*](http://apps.workflower.fi/vocabs/css/en) the rule applies to.
12 - The second describes what the rule is checking.
17 // the thing what the rule is checking
20 - Except when the rule applies to the whole stylesheet:
26 // what the rules are checking
31 Most rules allow you to choose whether you want to require *or* disallow something.
33 For example, whether numbers *must* or *must not* have a leading zero:
35 - `number-leading-zero`: `string - "always"|"never"`
36 - `"always"` - there *must always* be a leading zero.
37 - `"never"` - there *must never* be a leading zero.
40 a { line-height: 0.5; }
42 * This leading zero */
45 However, some rules *just disallow* something. `*-no-*` is used to identify these rules.
47 For example, whether empty blocks should be disallowed:
49 - `block-no-empty` - blocks *must not* be empty.
57 Notice how, for a rule like this, it does not make sense to have an option to enforce the opposite i.e. that every block *must* be empty.
61 `*-max-*` and `*-min-*` rules are used when a rule is *setting a limit* to something.
63 For example, specifying the maximum number of digits after the "." in a number:
65 - `number-max-precision`: `int`
68 a { font-size: 1.333em; }
70 * The maximum number of digits after this "." */
75 Whitespace rules allow you to specify whether an empty line, a single space, a newline or no space must be used in some specific part of the stylesheet.
77 The whitespace rules combine two sets of keywords:
79 1. `before`, `after` and `inside` are used to specify where the whitespace (if any) is expected.
80 2. `empty-line`, `space` and `newline` are used to specify whether a single empty line, a single space, a single newline or no space is expected there.
82 For example, specifying if a single empty line or no space must come before all the comments in a stylesheet:
84 - `comment-empty-line-before`: `string` - `"always"|"never"`
95 Additionally, some whitespace rule make use of another set of keywords:
97 1. `comma`, `colon`, `semicolon`, `opening-brace`, `closing-brace`, `opening-parenthesis`, `closing-parenthesis`, `operator` or `range-operator` are used if a specific piece of punctuation in the *thing* is being targetted.
99 For example, specifying if a single space or no space must come after a comma in a function:
101 - `function-comma-space-after`: `string` - `"always"|"never"`
104 a { transform: translate(1, 1) }
106 * The space after this commas */
109 The plural of the punctuation is used for `inside` rules. For example, specifying if a single space or no space must be inside the parentheses of a function:
111 - `function-parentheses-space-inside`: `string` - `"always"|"never"`
114 a { transform: translate( 1, 1 ); }
116 * The space inside these two parentheses */
119 ## Rules work together
121 The rules can be used together to enforce strict conventions.
123 ### `*-newline/space-before` and `*-newline/space-after` rules
125 Say you want to enforce no space before and a single space after the colon in every declaration:
130 * No space before and a single space after this colon */
133 You can enforce that with:
136 "declaration-colon-space-after": "always",
137 "declaration-colon-space-before": "never"
140 Some *things* (e.g. declaration blocks and value lists) can span more than one line. In these cases `newline` rules and extra options can be used to provide flexibility.
142 For example, this is the complete set of `value-list-comma-*` rules and their options:
144 - `value-list-comma-space-after`: `"always"|"never"|"always-single-line"|"never-single-line"`
145 - `value-list-comma-space-before`: `"always"|"never"|"always-single-line"|"never-single-line"`
146 - `value-list-comma-newline-after`: `"always"|"always-multi-line|"never-multi-line"`
147 - `value-list-comma-newline-before`: `"always"|"always-multi-line"|"never-multi-line"`
149 Where `*-multi-line` and `*-single-line` are in reference to the value list (the *thing*). For example, given:
155 font-family: sans, serif, monospace; /* single line value list */
158 * The value list start here and ends here */
161 There is only a single-line value list in this example. The selector is multi-line, as is the declaration block and, as such, also the rule. But the value list isn't and that is what the `*-multi-line` and `*-single-line` refer to in the context of this rule.
165 Say you only want to allow single-line value lists. And you want to enforce no space before and a single space after the commas:
169 font-family: sans, serif, monospace;
170 box-shadow: 1px 1px 1px red, 2px 2px 1px 1px blue inset, 2px 2px 1px 2px blue inset;
174 You can enforce that with:
177 "value-list-comma-space-after": "always",
178 "value-list-comma-space-before": "never"
183 Say you want to allow both single-line and multi-line value lists. You want there to be a single space after the commas in the single-line lists and no space before the commas in both the single-line and multi-line lists:
187 font-family: sans, serif, monospace; /* single-line value list with space after, but no space before */
188 box-shadow: 1px 1px 1px red, /* multi-line value list ... */
189 2px 2px 1px 1px blue inset, /* ... with newline after, ... */
190 2px 2px 1px 2px blue inset; /* ... but no space before */
194 You can enforce that with:
197 "value-list-comma-newline-after": "always-multi-line",
198 "value-list-comma-space-after": "always-single-line",
199 "value-list-comma-space-before": "never"
204 Say you want to allow both single-line and multi-line value lists. You want there to be no space before the commas in the single-line lists and always a space after the commas in both lists:
208 font-family: sans, serif, monospace;
209 box-shadow: 1px 1px 1px red
210 , 2px 2px 1px 1px blue inset
211 , 2px 2px 1px 2px blue inset;
215 You can enforce that with:
218 "value-list-comma-newline-before": "always-multi-line",
219 "value-list-comma-space-after": "always",
220 "value-list-comma-space-before": "never-single-line"
225 Lastly, the rules are flexible enough to enforce entirely different conventions for single-line and multi-line lists. Say you want to allow both single-line and multi-line value lists. You want the single-line lists to have a single space before and after the colons. Whereas you want the multi-line lists to have a single newline before the commas, but no space after:
229 font-family: sans , serif , monospace; /* single-line list with a single space before and after the comma */
230 box-shadow: 1px 1px 1px red /* multi-line list ... */
231 ,2px 2px 1px 1px blue inset /* ... with newline before, ... */
232 ,2px 2px 1px 2px blue inset; /* ... but no space after the comma */
236 You can enforce that with:
239 "value-list-comma-newline-after": "never-multi-line",
240 "value-list-comma-newline-before": "always-multi-line",
241 "value-list-comma-space-after": "always-single-line",
242 "value-list-comma-space-before": "always-single-line"
245 ### `*-empty-line-before` and `*-max-empty-lines` rules
247 These rules work together to control where empty lines are allowed.
249 Each *thing* is responsible for pushing itself away from the *preceding thing*, rather than pushing the *subsequent thing* away. This consistency is to avoid conflicts, and is why there aren't any `*-empty-line-after` rules in stylelint.
251 Say you want to enforce the following:
258 @media (min-width: 30em) {
264 --custom-property: green;
271 You can do that with:
274 "at-rule-empty-line-before": ["always", {
275 "except": ["first-nested"]
277 "custom-property-empty-line-before": [ "always", {
279 "after-custom-property",
283 "declaration-empty-line-before": ["always", {
289 "block-closing-brace-empty-line-before": "never",
290 "rule-empty-line-before": ["always-multi-line"]
293 We recommend that you set your primary option (e.g. `"always"` or `"never"`) to whatever is your most common occurrence and define your exceptions with the `except` optional secondary options. There are many values for the `except` option e.g. `first-nested`, `after-comment` etc.
295 The `*-empty-line-before` rules control whether there must never be an empty line or whether there must be *one or more* empty lines before a *thing*. The `*-max-empty-lines` rules complement this by controlling *the number* of empty lines within *things*. The `max-empty-lines` rule is used to set a limit across the entire source. A *stricter* limit can then be set within *things* using the likes of `function-max-empty-lines`, `selector-max-empty-lines` and `value-list-max-empty-lines`.
297 For example, say you want to enforce the following:
303 inset 0 2px 0 #dcffa6,
316 i.e. a maximum of 1 empty line within the whole source, but no empty lines within functions, selector lists and value lists.
318 You can do that with:
321 "function-max-empty-lines": 0,
322 "max-empty-lines": 1,
323 "selector-list-max-empty-lines": 0,
324 "value-list-max-empty-lines": 0
327 ### `*-whitelist`, `*-blacklist`, `color-named` and applicable `*-no-*` rules
329 These rules work together to (dis)allow language features and constructs.
331 There are `*-whitelist` and `*-blacklist` rules that target the main constructs of the CSS language: at-rules, functions, declarations (i.e. property-value pairs), properties and units. These rules can be used to (dis)allow any language features that makes use of these constructs (e.g. `@media`, `rgb()`). However, there are features not caught by these `*-whitelist` and `*-blacklist` rules (or are, but would require complex regex to configure). There are individual rules, usually a `*-no-*` rule (e.g. `color-no-hex` and `selector-no-id`), to disallow each of these features.
333 Say you want to disallow the `@debug` language extension. You can do that using either the `at-rule-blacklist` or `at-rule-whitelist` rules because the `@debug` language extension uses the at-rule construct e.g.
336 "at-rule-blacklist": ["debug"]
339 Say you want to, for whatever reason, disallow the whole at-rule construct. You can do that using:
342 "at-rule-whitelist": []
345 Say you want to disallow the value `none` for the `border` properties. You can do that using either the `declaration-property-value-blacklist` or `declaration-property-value-whitelist` e.g.
348 "declaration-property-value-blacklist": [{
349 "/^border/": ["none"]
355 Most `<color>` values are *functions*. As such, they can be (dis)allowed using either the `function-blacklist` or `function-whitelist` rules. There are two other color representations that aren't functions: named colors and hex colors. There are two specific rules that (dis)allow these: `color-named` and `color-no-hex`, respectively.
357 Say you want to enforce using a named color *if one exists for your chosen color* and use `hwb` color if one does not, e.g.:
361 background: hwb(235, 0%, 0%); /* there is no named color equivalent for this color */
366 If you're taking a whitelisting approach, you can do that with:
369 "color-named": "always-where-possible",
370 "color-no-hex": true,
371 "function-whitelist": ["hwb"]
374 Or, if you're taking a blacklisting approach:
377 "color-named": "always-where-possible",
378 "color-no-hex": true,
379 "function-blacklist": ["/^rgb/", "/^hsl/", "gray"]
382 This approach scales to when language extensions (that use the two built-in extendable syntactic constructs of at-rules and functions) are used. For example, say you want to disallow all standard color presentations in favour of using a custom color representation function, e.g. `my-color(red with a dash of green / 5%)`. You can do that with:
385 "color-named": "never",
386 "color-no-hex": true,
387 "function-whitelist": ["my-color"]