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
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,7 +41,7 @@ With specificity, comes great responsibility. Broad selectors allow us to be eff
41
41
- 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.
42
42
- Use human readable selectors that describe what element(s) they style.
43
43
- Attribute selectors should use double quotes around values
44
-
- Refrain from using over-qualified selectors, <code>div.container</code> can simply be stated as <code>.container</code>
44
+
- Refrain from using over-qualified selectors, `div.container` can simply be stated as `.container`
45
45
46
46
Correct:
47
47
@@ -85,7 +85,7 @@ 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: <code>#fff</code> instead of <code>#FFFFFF</code>.
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
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 <ahref="https://codex.wordpress.org/CSS_Shorthand">CSS Shorthand</a>.)
90
90
91
91
Correct:
@@ -174,8 +174,8 @@ There are numerous ways to input values for properties. Follow the guidelines be
174
174
- Space before the value, after the colon.
175
175
- Do not pad parentheses with spaces.
176
176
- Always end in a semicolon.
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 <code>content</code> property.
178
-
- Font weights should be defined using numeric values (e.g. <code>400</code> instead of <code>normal</code>, <code>700</code> rather than <code>bold</code>).
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
+
- Font weights should be defined using numeric values (e.g. `400` instead of `normal`, `700` rather than `bold`).
179
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: <ahref="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/">http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/</a>
181
181
- Use a leading zero for decimal values, including in rgba().
@@ -285,10 +285,10 @@ For inline:
285
285
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:
286
286
287
287
- If you are attempting to fix an issue, attempt to remove code before adding more.
288
-
- Magic Numbers are unlucky. These are numbers that are used as quick fixes on a one-off basis. Example: <code>.box { margin-top: 37px }</code>.
289
-
- DOM will change over time, target the element you want to use as opposed to "finding it" through its parents. Example: Use <code>.highlight</code> on the element as opposed to <code>.highlight a</code> (where the selector is on the parent)
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
+
- 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
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
-
- Do not restate default property & value combinations (for instance <code>display: block;</code> on block-level elements).
291
+
- Do not restate default property & value combinations (for instance `display: block;` on block-level elements).
0 commit comments