1 | # declaration-empty-line-before
|
2 |
|
3 | Require or disallow an empty line before declarations.
|
4 |
|
5 |
|
6 | ```css
|
7 | a {
|
8 | --foo: pink;
|
9 | /* ← */
|
10 | top: 15px; /* ↑ */
|
11 | } /* ↑ */
|
12 | /** ↑
|
13 | * This line */
|
14 | ```
|
15 |
|
16 | This rule only applies to standard property declarations. Use the [`custom-property-empty-line-before`](../custom-property-empty-line-before/README.md) rule for custom property declarations.
|
17 |
|
18 | The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule. We recommend to enable [`indentation`](../indentation/README.md) rule for better autofixing results with this rule.
|
19 |
|
20 | ## Options
|
21 |
|
22 | `string`: `"always"|"never"`
|
23 |
|
24 | ### `"always"`
|
25 |
|
26 | The following patterns are considered problems:
|
27 |
|
28 |
|
29 | ```css
|
30 | a {
|
31 | --foo: pink;
|
32 | top: 5px;
|
33 | }
|
34 | ```
|
35 |
|
36 |
|
37 | ```css
|
38 | a {
|
39 | bottom: 15px;
|
40 | top: 5px;
|
41 | }
|
42 | ```
|
43 |
|
44 | The following patterns are _not_ considered problems:
|
45 |
|
46 |
|
47 | ```css
|
48 | a {
|
49 | --foo: pink;
|
50 |
|
51 | top: 5px;
|
52 | }
|
53 | ```
|
54 |
|
55 |
|
56 | ```css
|
57 | a {
|
58 |
|
59 | bottom: 15px;
|
60 |
|
61 | top: 5px;
|
62 | }
|
63 | ```
|
64 |
|
65 | ### `"never"`
|
66 |
|
67 | The following patterns are considered problems:
|
68 |
|
69 |
|
70 | ```css
|
71 | a {
|
72 | --foo: pink;
|
73 |
|
74 | bottom: 15px;
|
75 | }
|
76 | ```
|
77 |
|
78 |
|
79 | ```css
|
80 | a {
|
81 |
|
82 | bottom: 15px;
|
83 |
|
84 | top: 5px;
|
85 | }
|
86 | ```
|
87 |
|
88 | The following patterns are _not_ considered problems:
|
89 |
|
90 |
|
91 | ```css
|
92 | a {
|
93 | --foo: pink;
|
94 | bottom: 15px;
|
95 | }
|
96 | ```
|
97 |
|
98 |
|
99 | ```css
|
100 | a {
|
101 | bottom: 15px;
|
102 | top: 5px;
|
103 | }
|
104 | ```
|
105 |
|
106 | ## Optional secondary options
|
107 |
|
108 | ### `except: ["after-comment", "after-declaration", "first-nested"]`
|
109 |
|
110 | #### `"after-comment"`
|
111 |
|
112 | Reverse the primary option for declarations that follow a comment.
|
113 |
|
114 | Shared-line comments do not trigger this option.
|
115 |
|
116 | For example, with `"always"`:
|
117 |
|
118 | The following patterns are considered problems:
|
119 |
|
120 |
|
121 | ```css
|
122 | a {
|
123 | /* comment */
|
124 |
|
125 | top: 5px;
|
126 | }
|
127 | ```
|
128 |
|
129 |
|
130 | ```css
|
131 | a {
|
132 | bottom: 5px; /* comment */
|
133 | top: 5px;
|
134 | }
|
135 | ```
|
136 |
|
137 | The following patterns are _not_ considered problems:
|
138 |
|
139 |
|
140 | ```css
|
141 | a {
|
142 | /* comment */
|
143 | top: 5px;
|
144 | }
|
145 |
|
146 | ```
|
147 |
|
148 |
|
149 | ```css
|
150 | a {
|
151 | bottom: 5px; /* comment */
|
152 |
|
153 | top: 5px;
|
154 | }
|
155 |
|
156 | ```
|
157 |
|
158 | #### `"after-declaration"`
|
159 |
|
160 | Reverse the primary option for declarations that follow another declaration.
|
161 |
|
162 | Shared-line comments do not affect this option.
|
163 |
|
164 | For example, with `"always"`:
|
165 |
|
166 | The following patterns are considered problems:
|
167 |
|
168 |
|
169 | ```css
|
170 | a {
|
171 |
|
172 | bottom: 15px;
|
173 |
|
174 | top: 5px;
|
175 | }
|
176 | ```
|
177 |
|
178 |
|
179 | ```css
|
180 | a {
|
181 |
|
182 | bottom: 15px; /* comment */
|
183 |
|
184 | top: 5px;
|
185 | }
|
186 | ```
|
187 |
|
188 | The following patterns are _not_ considered problems:
|
189 |
|
190 |
|
191 | ```css
|
192 | a {
|
193 |
|
194 | bottom: 15px;
|
195 | top: 5px;
|
196 | }
|
197 | ```
|
198 |
|
199 |
|
200 | ```css
|
201 | a {
|
202 |
|
203 | bottom: 15px; /* comment */
|
204 | top: 5px;
|
205 | }
|
206 | ```
|
207 |
|
208 | #### `"first-nested"`
|
209 |
|
210 | Reverse the primary option for declarations that are nested and the first child of their parent node.
|
211 |
|
212 | For example, with `"always"`:
|
213 |
|
214 | The following patterns are considered problems:
|
215 |
|
216 |
|
217 | ```css
|
218 | a {
|
219 |
|
220 | bottom: 15px;
|
221 |
|
222 | top: 5px;
|
223 | }
|
224 | ```
|
225 |
|
226 | The following patterns are _not_ considered problems:
|
227 |
|
228 |
|
229 | ```css
|
230 | a {
|
231 | bottom: 15px;
|
232 |
|
233 | top: 5px;
|
234 | }
|
235 | ```
|
236 |
|
237 | ### `ignore: ["after-comment", "after-declaration", "first-nested", "inside-single-line-block"]`
|
238 |
|
239 | #### `"after-comment"`
|
240 |
|
241 | Ignore declarations that follow a comment.
|
242 |
|
243 | For example, with `"always"`:
|
244 |
|
245 | The following patterns are _not_ considered problems:
|
246 |
|
247 |
|
248 | ```css
|
249 | a {
|
250 | /* comment */
|
251 | bottom: 15px;
|
252 | }
|
253 | ```
|
254 |
|
255 | #### `"after-declaration"`
|
256 |
|
257 | Ignore declarations that follow another declaration.
|
258 |
|
259 | For example, with `"always"`:
|
260 |
|
261 | The following patterns are _not_ considered problems:
|
262 |
|
263 |
|
264 | ```css
|
265 | a {
|
266 |
|
267 | bottom: 15px;
|
268 | top: 15px;
|
269 | }
|
270 | ```
|
271 |
|
272 |
|
273 | ```css
|
274 | a {
|
275 |
|
276 | bottom: 15px;
|
277 |
|
278 | top: 15px;
|
279 | }
|
280 | ```
|
281 |
|
282 |
|
283 | ```css
|
284 | a {
|
285 |
|
286 | color: orange;
|
287 | text-decoration: none;
|
288 |
|
289 | bottom: 15px;
|
290 | top: 15px;
|
291 | }
|
292 | ```
|
293 |
|
294 | #### `"first-nested"`
|
295 |
|
296 | Ignore declarations that are nested and the first child of their parent node.
|
297 |
|
298 | For example, with `"always"`:
|
299 |
|
300 | The following patterns are _not_ considered problems:
|
301 |
|
302 |
|
303 | ```css
|
304 | a {
|
305 | bottom: 15px;
|
306 |
|
307 | top: 5px;
|
308 | }
|
309 | ```
|
310 |
|
311 | #### `"inside-single-line-block"`
|
312 |
|
313 | Ignore declarations that are inside single-line blocks.
|
314 |
|
315 | For example, with `"always"`:
|
316 |
|
317 | The following patterns are _not_ considered problems:
|
318 |
|
319 |
|
320 | ```css
|
321 | a { bottom: 15px; top: 5px; }
|
322 | ```
|