Codex

CSS Coding Standards

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

Languages: English • 日本語 • (Add your language)

Just like with PHP Coding Standards, following CSS code standards ensures that your CSS code is valid, helps in debugging and maintenance, and aids in collaboration with other developers.

Contents

Block Style 

selector {
    property: value;
}
  • Each selector should be on its own line. If there is a comma in a selector list, follow it with a line break.
  • Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon.
  • The closing brace should be flush left, using the same level of indentation as the opening selector.
  • Add two blank lines between sections, but leave no lines between blocks in a section.

Correct: 

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

Incorrect: 

#selector-1, #selector-2, #selector-3 {
    background: #fff; color: #000;
    }

Also incorrect: 

#selector-1 { background: #fff; color: #000; }

Selectors

  • Following WordPress Coding Standards, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores.
  • Use human readable selectors that describe what element(s) they style.

Correct: 

#comment-form {
    margin: 0;
}

Incorrect: 

#commentForm { /* Avoid camelcase. */
    margin: 0;
}
#comment_form { /* Avoid underscores. */
    margin: 0;
}
#c1-xr { /* What is a c1-xr?! Use a better name. */
    margin: 0;
}

Properties and Values

  • Properties should be organized alphabetically inside each block (with exceptions noted below).
  • Properties should be followed by a colon and a space.
  • All properties and values should be lowercase, except for font names and vendor-specific properties.
  • Use hex code for colors. Avoid RBG and uppercase, and shorten values when possible: #fff instead of #FFFFFF.
  • Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values. (For a shorthand reference, see CSS Shorthand.)

Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to (why?). 

#selector-1 {
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
}

Dimensional position properties (top, right, bottom, left) should be grouped together outside of alphabetical ordering when paired with a specific type of positioning (relative, absolute, etc.). 

#selector-1 {
    font-size: 1em;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

Where width and height are both declared, height should always follow width. 

#selector-1 {
    width: auto;
    height: auto;
}

Comments 

/* Short comments: one line with no trailing space. */
#selector-1 {...

#selector-1 {
    color: #000; /* A short comment can also follow one property/value pair. */
}

/*
For longer, multiple line comments that need more room,
add a newline before and after the comment.
Leave one line of space before the next block.
*/

#selector-1 {...

For comments denoting a new section, use the following notation (see CSS Flags). Sections are separated from the previous block by two lines, and should have one following line of space. 

#previous-block {
    color: #000;
}


/* =Name of section
-------------------------------------------------------------- */

#selector-1 {...

Formatting Tools

There are CSS authoring applications, like TextMate, CSSEdit and TopStyle that have a "format" command that allows you to preset the format you'd like, and you can reformat the entire document at once.

In TextMate, for example, you can use shortcuts to help format CSS quickly.

  1. Highlight the properties inside a single block, and use F5 to sort them alphabetically.
  2. CTRL-Q reformats CSS code to mostly match these standards. It still might require some cleanup for end semicolons and hex colors to lowercase, but it does the spacing and formatting nicely.

Here are several other tools for cleaning up your CSS code.

Inspiration and Credits

See Also

Retrieved from "http://codex.wordpress.org/CSS_Coding_Standards"

Codex Resources