Manual:Coding conventions/CSS

shortcut: CC/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.

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).

/* Wrong */
.bar {
        border-radius: 30px 10px;
        -webkit-border-radius: 30px 10px;
}
 
/* Right */
.bar {
        -webkit-border-radius: 30px 10px;
        /* It is important that the -webkit version is before the standardized version.
         * Otherwise it will override it (as expected in CSS), including triggering the
         * bugs the old -webkit- version has that WebKit has since fixed (in CSS3), but keeps
         * in the old implementation (for backwards compatibility).
         * see also: css-tricks.com/ordering-css3-properties
         */
        border-radius: 30px 10px;` 
}
 
/* Wrong */
.foo {
        background-image: linear-gradient(top, #444444, #999999);
        background-image: -o-linear-gradient(top, #444444, #999999);
        background-image: -moz-linear-gradient(top, #444444, #999999);
        background-image: -webkit-linear-gradient(top, #444444, #999999);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
}
 
/* Right */
.foo {
        background-color: #444444;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
        background-image: -webkit-linear-gradient(top, #444444, #999999);
        background-image: -moz-linear-gradient(top, #444444, #999999);
        background-image: -o-linear-gradient(top, #444444, #999999);
        background-image: linear-gradient(to bottom, #444444, #999999);
}
 
/* Right (commented) */
.foo {
        /* Fallback color in case background-image is broken or not supported */
        background-color: #444444;
        /* Safari 4+, Chrome 2, iOS 2 */
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
        /* Safari 5.1+, Chrome 10+, iOS 5 */
        background-image: -webkit-linear-gradient(top, #444444, #999999);
        /* Firefox 3.6 - 15 */
        background-image: -moz-linear-gradient(top, #444444, #999999);
        /* Opera 11.10 - 12.5 */
        background-image: -o-linear-gradient(top, #444444, #999999);
        /* Standard (Firefox 16+, Opera 12.5+, IE10) */
        background-image: linear-gradient(to bottom, #444444, #999999);
}

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