Manual:Coding conventions/CSS

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.

.selector,
#some-element {
        float: right;
        text-align: left;
}
 
#look-at-the-left {
        /* @noflip */
        float: left;
        /* @embed */
        background-image: url(images/foobar.png);
}

Quotes

In the background-image declaration, the url() 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.

CSS Naming

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

Some examples:

/* Site-wide elements */
.mw-body
#mw-panel
#mw-js-message
.mw-headline
.mw-label
.mw-input
 
/* Special pages */
.mw-spcontent
/* - Special:AllPages */
.mw-allpages-table-form
.mw-allpages-nav
/* - Special:BlockIp */
#mw-bi-target