You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: wordpress-coding-standards/css.md
+25-12Lines changed: 25 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,9 @@
3
3
Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins. Files within a project should appear as though created by a single entity. Above all else, create code that is readable, meaningful, consistent, and beautiful.
4
4
5
5
Within core stylesheets, inconsistencies will often be found. We are working on addressing these and make every effort to have patches and commits from this point forward follow the CSS coding standards. More information on the above and contributing to UI/front-end development will be forthcoming in a separate set of guidelines.
6
-
<h2>Structure</h2>
6
+
7
+
## Structure
8
+
7
9
There are plenty of different methods for structuring a stylesheet. With the CSS in core, it is important to retain a high degree of legibility. This enables subsequent contributors to have a clear understanding of the flow of the document.
8
10
<ul>
9
11
<li>Use tabs, not spaces, to indent each property.</li>
@@ -32,7 +34,8 @@ Incorrect:
32
34
#selector-1 { background: #fff; color: #000; }
33
35
```
34
36
35
-
<h2>Selectors</h2>
37
+
## Selectors
38
+
36
39
With specificity, comes great responsibility. Broad selectors allow us to be efficient, yet can have adverse consequences if not tested. Location-specific selectors can save us time, but will quickly lead to a cluttered stylesheet. Exercise your best judgement to create selectors that find the right balance between contributing to the overall style and layout of the DOM.
37
40
<ul>
38
41
<li>Similar to the <ahref="https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/#naming-conventions">WordPress PHP Coding Standards</a> for file names, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores.</li>
@@ -76,7 +79,8 @@ input[type=text] { /&042; Should be [type="text"] &042;/
76
79
}
77
80
```
78
81
79
-
<h2>Properties</h2>
82
+
## Properties
83
+
80
84
Similar to selectors, properties that are too specific will hinder the flexibility of the design. Less is more. Make sure you are not repeating styling or introducing fixed dimensions (when a fluid solution is more acceptable).
81
85
<ul>
82
86
<li>Properties should be followed by a colon and a space.</li>
@@ -106,7 +110,8 @@ Incorrect:
106
110
}
107
111
```
108
112
109
-
<h3>Property Ordering</h3>
113
+
### Property Ordering
114
+
110
115
<blockquote>"Group like properties together, especially if you have a lot of them."
111
116
-- Nacin</blockquote>
112
117
Above all else, choose something that is meaningful to you and semantic in some way. Random ordering is chaos, not poetry. In WordPress Core, our choice is logical or grouped ordering, wherein properties are grouped by meaning and ordered specifically within those groups. The properties within groups are also strategically ordered to create transitions between sections, such as background directly before color. The baseline for ordering is:
@@ -119,7 +124,7 @@ Above all else, choose something that is meaningful to you and semantic in some
119
124
</ul>
120
125
Things that are not yet used in core itself, such as CSS3 animations, may not have a prescribed place above but likely would fit into one of the above in a logical manner. Just as CSS is evolving, so our standards will evolve with it.
121
126
122
-
Top/Right/Bottom/Left (TRBL/trouble) should be the order for any relevant properties (e.g. `margin`), much as the order goes in values. Corner specifiers (e.g. `border-radius-*-*`) should be `top-left`, `top-right`, `bottom-right`, `bottom-left`. This is derived from how shorthand values would be ordered.
127
+
Top/Right/Bottom/Left (TRBL/trouble) should be the order for any relevant properties (e.g. margin), much as the order goes in values. Corner specifiers (e.g. border-radius-*-*) should be top-left, top-right, bottom-right, bottom-left. This is derived from how shorthand values would be ordered.
123
128
124
129
Example:
125
130
@@ -147,7 +152,8 @@ Example:
147
152
}
148
153
```
149
154
150
-
<h3>Vendor Prefixes</h3>
155
+
### Vendor Prefixes
156
+
151
157
Updated on 2/13/2014, after <ahref="https://core.trac.wordpress.org/changeset/27174">[27174]</a>:
152
158
153
159
We use <ahref="https://github.com/postcss/autoprefixer">Autoprefixer</a> as a pre-commit tool to easily manage necessary browser prefixes, thus making the majority of this section moot. For those interested in following that output without using Grunt, vendor prefixes should go longest (-webkit-) to shortest (unprefixed). All other spacing remains as per the rest of standards.
@@ -160,7 +166,8 @@ We use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> as a p
160
166
}
161
167
```
162
168
163
-
<h2>Values</h2>
169
+
## Values
170
+
164
171
There are numerous ways to input values for properties. Follow the guidelines below to help us retain a high degree of consistency.
165
172
<ul>
166
173
<li>Space before the value, after the colon.</li>
@@ -226,7 +233,8 @@ Incorrect:
226
233
}
227
234
```
228
235
229
-
<h2>Media Queries</h2>
236
+
## Media Queries
237
+
230
238
Media queries allow us to gracefully degrade the DOM for different screen sizes. If you are adding any, be sure to test above and below the break-point you are targeting.
231
239
<ul>
232
240
<li>It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet.
@@ -244,7 +252,8 @@ Example:
244
252
}
245
253
```
246
254
247
-
<h2>Commenting</h2>
255
+
## Commenting
256
+
248
257
<ul>
249
258
<li>Comment, and comment liberally. If there are concerns about file size, utilize minified files and the SCRIPT_DEBUG constant. Long comments should manually break the line length at 80 characters.</li>
250
259
<li>A table of contents should be utilized for longer stylesheets, especially those that are highly sectioned. Using an index number (1.0, 1.1, 2.0, etc.) aids in searching and jumping to a location.</li>
@@ -274,7 +283,8 @@ For inline:
274
283
}
275
284
```
276
285
277
-
<h2>Best Practices</h2>
286
+
## Best Practices
287
+
278
288
Stylesheets tend to grow in length and complexity, and as they grow the chance of redundancy increases. By following some best practices we can help our CSS maintain focus and flexibility as it evolves:
279
289
<ul>
280
290
<li>If you are attempting to fix an issue, attempt to remove code before adding more.</li>
@@ -284,9 +294,12 @@ Stylesheets tend to grow in length and complexity, and as they grow the chance o
284
294
<li>Do not restate default property & value combinations (for instance <code>display: block;</code> on block-level elements).</li>
285
295
</ul>
286
296
287
-
<h3>WP Admin CSS</h3>
297
+
### WP Admin CSS
298
+
288
299
Check out the <ahref="https://wordpress.github.io/css-audit/public/wp-admin">WP Admin CSS Audit</a>, a report generated to document the health of the WP Admin CSS code. Read more in <ahref="https://github.com/WordPress/css-audit/blob/trunk/README.md">the repository's README</a>.
289
-
<h2>Related Links</h2>
300
+
301
+
## Related Links
302
+
290
303
<ul>
291
304
<li>Principles of writing consistent, idiomatic CSS: <ahref="https://github.com/necolas/idiomatic-css">https://github.com/necolas/idiomatic-css</a></li>
0 commit comments