CSS Coding Standards for WordPress: A Guide

WordPress Contributors Need Rules to Create Code

Coding Standards for CSS: Best Practices

Structure

Source: WordPress.
  • Use tabs for indents rather than spaces.
  • Insert one blank line between the blocks of a section, but two in between sections themselves.
  • Selectors should have lines of their own, which end in either ‘,’ or ‘}.’
  • Additionally, property value pairs should have their own lines too. So, you contributors need to add an indent and end with a ‘;.’ Also, the closing brace should be left-aligned and indented like the opening selector.

Selectors

Source: WordPress
  • Naming your selectors is similar to PHP Coding Standards, so use lowercase and hyphens to separate words.
  • Apply selectors that are readable for humans to describe the element being styled.
  • The values of attribute selectors should use ‘“”.’
  • There’s no need to use overqualified or “overly complex” selectors.

Properties

Source: WordPress.
  • Properties should be followed by both a ‘:’ and a space.
  • Every property and value should be in lowercase. The exceptions to this rule are font names and properties specific to vendors.
  • For colors, contributors must apply hex code. Additionally, if you need opacity, use rgba().
  • Ensure that you shorten values as much as possible.
  • By extension, shorthand is crucial for properties unless you’re overriding styles.

Property Ordering

Source: WordPress.
  • Display
  • Positioning
  • Box model
  • Colors and Typography
  • Others
  • Things that aren’t used in WordPress Core don’t have a specified place in the ordering baseline. Still, they can logically fit into any of the categories.
  • The recommended order for properties is Top > Right > Bottom > Left.
  • If you’re working on corner specifiers, the order goes like this: Top left > Top right > Bottom right > Bottom left.
  • You may also order the properties alphabetically but with concessions as needed.

Vendor Prefixes

Source: WordPress.

Values

Source: WordPress.
  • Add a space before the value but after the ‘;.’ Additionally, avoid padding ‘()’ with spaces, and end with ‘;.’
  • Use ‘“”’ when a font name has a space or content property’s values, etc.
  • Contributors can specify font weights. So, use numeric values to define font style (bold, italic, etc.)
  • Unless otherwise necessary, 0 values shouldn’t have units.
  • Line height is unitless unless it must be defined using a pixel value.
  • Leading zero should be used for decimal values.
  • If a property has multiple values separated by commas, it should also be separated by spaces or newlines. Newlines are perfect for readability if there are lengthier values. Additionally, the values should have a one-level indent from the original property.
  • If a value has lists of values, contributors should separate them with spaces.

Media Queries

Source: WordPress.
  • The queries have to be grouped according to media. You can find them at the bottom of the document. But the WordPress Core’s wp-admin.css file is exempt from this due to its large size.
  • The document’s rule sets must be indented one level.

Commenting

Source: WordPress.
  • For any size concerns, use minified files and SCRIPT_DEBUG.
  • Longer comments should break line length at 80 characters.
  • Section Longer stylesheets into a table of contents. Also, you may add index numbers to help jump to a specific section.
  • The comments must be as formatted as PHPDoc.
  • There should be newlines for section and subsection headers above and below them.
  • Lastly, no empty newlines should separate inline comments from related items.

More Best Practices

  • If you’re fixing problems in the stylesheet, try removing code first before adding any more.
  • It’s recommended to avoid Magic Numbers or the quick fix numbers.
  • DOM changes with time, so target an element rather than searching through its parents.
  • Height properties should be used when including external elements. An excellent alternative is line height.
  • Avoid restating default property and value combinations.

Apply CSS Coding Standards to Your Stylesheets Today!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pamela Salon

Pamela Salon

To empower Businesses & SMEs to CONNECT, OPERATE & TRANSACT effectively with their clients through Online and Business Solutions