Manual:Coding conventions/CSS


 * Manual:CSS has additional caveats and tips that aren't mentioned here.

Whitespace

 * One selector per line
 * Opening braces for the CSS rule on the same line as the (last) selector
 * Indent each declaration with a tab
 * No space before the colon
 * 1 space between the colon and the value
 * a semi-colon after each declaration (including the last one)
 * Closing braces unindented back to the left
 * Annotation for CSSJanus and CSSMin should be on their own line, above the CSS declaration they're for.
 * An empty line between one CSS rule and the next.

Quotes
In the  declaration, the   syntax is preferred to be used without quotes. They are not needed. The only case where it could cause problems is when an unescaped closing parenthesis occurs in the given path, but those should be URL-escaped.

CSS3
Always put newer versions after older versions in case of vendor prefixes, putting the standardized declaration at the end. See also http://css-tricks.com/ordering-css3-properties/.

And in the case of gradients, make sure to provide a good solid fallback color. And make sure that whatever content is displayed on top of the background does not depend on it being a gradient (depend, as in, should not become less readable or usable).

Naming
Class and IDs are named the same way. All css hooks are named lowercase and broken up by dashes. Using the  prefix avoids conflicts with IDs generated by the wikitext parser to mark section headings

Some examples: