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
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ Incorrect:
38
38
39
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.
40
40
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.
41
+
- Similar to the [WordPress PHP Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/#naming-conventions) 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
44
- Refrain from using over-qualified selectors, `div.container` can simply be stated as `.container`
@@ -86,7 +86,7 @@ Similar to selectors, properties that are too specific will hinder the flexibili
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
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 <ahref="https://codex.wordpress.org/CSS_Shorthand">CSS Shorthand</a>.)
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
@@ -155,9 +155,9 @@ Example:
155
155
156
156
### Vendor Prefixes
157
157
158
-
Updated on 2/13/2014, after <ahref="https://core.trac.wordpress.org/changeset/27174">[27174]</a>:
158
+
Updated on 2/13/2014, after [[27174](https://core.trac.wordpress.org/changeset/27174)]:
159
159
160
-
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
+
We use [Autoprefixer](https://github.com/postcss/autoprefixer) 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.
161
161
162
162
```css
163
163
.sample-output {
@@ -177,7 +177,7 @@ There are numerous ways to input values for properties. Follow the guidelines be
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
179
- 0 values should not have units unless necessary, such as with transition-duration.
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>
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
181
- Use a leading zero for decimal values, including in rgba().
182
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
183
- Lists of values within a value, like within rgba(), should be separated by a space.
@@ -254,7 +254,7 @@ Example:
254
254
255
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
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
-
- Comments should be formatted much as PHPDoc is. The <ahref="http://web.archive.org/web/20070601200419/http://cssdoc.net/">CSSDoc</a> 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.
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:
260
260
@@ -293,8 +293,8 @@ Stylesheets tend to grow in length and complexity, and as they grow the chance o
293
293
294
294
### WP Admin CSS
295
295
296
-
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>.
296
+
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).
297
297
298
298
## Related Links
299
299
300
-
- Principles of writing consistent, idiomatic CSS: <ahref="https://github.com/necolas/idiomatic-css">https://github.com/necolas/idiomatic-css</a>
300
+
- Principles of writing consistent, idiomatic CSS: [https://github.com/necolas/idiomatic-css](https://github.com/necolas/idiomatic-css).
0 commit comments