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
+11-12Lines changed: 11 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,8 +85,8 @@ Similar to selectors, properties that are too specific will hinder the flexibili
85
85
86
86
- Properties should be followed by a colon and a space.
87
87
- All properties and values should be lowercase, except for font names and vendor-specific properties.
88
-
- Use hex code for colors, or rgba() if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: `#fff` instead of `#FFFFFF`.
89
-
- Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible. (For a shorthand reference, see [CSS Shorthand](https://codex.wordpress.org/CSS_Shorthand).)
88
+
- Use hex code for colors, or `rgba()` if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: `#fff` instead of `#FFFFFF`.
89
+
- Use shorthand (except when overriding styles) for `background`, `border`, `font`, `list-style`, `margin`, and `padding` values as much as possible. (For a shorthand reference, see [CSS Shorthand](https://codex.wordpress.org/CSS_Shorthand).)
90
90
91
91
Correct:
92
92
@@ -115,7 +115,7 @@ Incorrect:
115
115
> "Group like properties together, especially if you have a lot of them."
116
116
> -- Nacin
117
117
118
-
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:
118
+
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
119
120
120
- Display
121
121
- Positioning
@@ -176,11 +176,11 @@ There are numerous ways to input values for properties. Follow the guidelines be
176
176
- Always end in a semicolon.
177
177
- Use double quotes rather than single quotes, and only when needed, such as when a font name has a space or for the values of the `content` property.
178
178
- Font weights should be defined using numeric values (e.g. `400` instead of `normal`, `700` rather than `bold`).
179
-
- 0 values should not have units unless necessary, such as with transition-duration.
179
+
- 0 values should not have units unless necessary, such as with `transition-duration`.
180
180
- Line height should also be unit-less, unless necessary to be defined as a specific pixel value. This is more than just a style convention, but is worth mentioning here. More information: [https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/](https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/).
181
-
- Use a leading zero for decimal values, including in rgba().
182
-
- Multiple comma-separated values for one property should be separated by either a space or a newline. For better readability newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow, including before the first value. Values should then be indented one level in from the property.
183
-
- Lists of values within a value, like within rgba(), should be separated by a space.
181
+
- Use a leading zero for decimal values, including in `rgba()`.
182
+
- Multiple comma-separated values for one property should be separated by either a space or a newline. For better readability newlines should be used for lengthier multi-part values such as those for shorthand properties like `box-shadow` and `text-shadow`, including before the first value. Values should then be indented one level in from the property.
183
+
- Lists of values within a value, like within `rgba()`, should be separated by a space.
184
184
185
185
Correct:
186
186
@@ -239,7 +239,7 @@ Incorrect:
239
239
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.
240
240
241
241
- It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet.
242
-
- An exception is made for the wp-admin.css file in core, as it is very large and each section essentially represents a stylesheet of its own. Media queries are therefore added at the bottom of sections as applicable.
242
+
- An exception is made for the `wp-admin.css` file in core, as it is very large and each section essentially represents a stylesheet of its own. Media queries are therefore added at the bottom of sections as applicable.
243
243
- Rule sets for media queries should be indented one level in.
244
244
245
245
Example:
@@ -252,8 +252,8 @@ Example:
252
252
253
253
## Commenting
254
254
255
-
- 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.
256
-
- 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.
255
+
- 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.
256
+
- 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.
257
257
- Comments should be formatted much as PHPDoc is. The [CSSDoc](https://web.archive.org/web/20070601200419/http://cssdoc.net/) standard is not necessarily widely accepted or used but some aspects of it may be adopted over time. Section/subsection headers should have newlines before and after. Inline comments should not have empty newlines separating the comment from the item to which it relates.
258
258
259
259
For sections and subsections:
@@ -287,10 +287,9 @@ Stylesheets tend to grow in length and complexity, and as they grow the chance o
287
287
- If you are attempting to fix an issue, attempt to remove code before adding more.
288
288
- Magic Numbers are unlucky. These are numbers that are used as quick fixes on a one-off basis. Example: `.box { margin-top: 37px }`.
289
289
- DOM will change over time, target the element you want to use as opposed to "finding it" through its parents. Example: Use `.highlight` on the element as opposed to `.highlight a` (where the selector is on the parent)
290
-
- Know when to use the height property. It should be used when you are including outside elements (such as images). Otherwise use line-height for more flexibility.
290
+
- Know when to use the `height` property. It should be used when you are including outside elements (such as images). Otherwise use `line-height` for more flexibility.
291
291
- Do not restate default property & value combinations (for instance `display: block;` on block-level elements).
292
292
293
-
294
293
### WP Admin CSS
295
294
296
295
Check out the [WP Admin CSS Audit](https://wordpress.github.io/css-audit/public/wp-admin), a report generated to document the health of the WP Admin CSS code. Read more in [the repository's README](https://github.com/WordPress/css-audit/blob/trunk/README.md).
0 commit comments