CSS coding standards

This is a proposal only, see on-going discussion at http://groups.drupal.org/node/14421

Note: The Drupal CSS coding standards apply to code that is to become a part of core or contributed modules. This document is based on the standards proposed initially by Nick Lewis.

Write valid CSS

All CSS code should be valid CSS, preferably to CSS 2.1. CSS 3.0 is acceptable too, provided the use can be justified and the principles of graceful degradation are followed.

Concise terminology used in these standards:

Selectors

Selectors should be on a single line, with a space after the last selector, followed by an opening brace. A selector should end with a closing brace that is unindented and on a separate line.

Multiple selectors

Multiple selectors should each be on a single line, with no space after each comma.

Properties

All properties should be on the following line after the brace. Each property should:

• be on its own line.
• be indented with two spaces, ie no tabs.
• have a single space after the property name and before the property value.
• end in a semi-colon.

Alphabetizing properties

Multiple properties should be listed in alphabetical order. Rather than:

you should use:

Note that colors in RGB notation (eg '#FFF')are in uppercase, whereas non-color values should be in lowercase.

Properties with multiple values

Where properties can have multiple values, each value should be separated with a space.

Comments

CSS files should be commented using CSSdoc syntax.
In line with PHP coding standards, block level documentation should be used as follows, to describe a section of code below the comment.

At the top of the file a CVS ID tag and a separate file-level CSSDoc block should be included to describe the contents of the file:

The CVS ID tag at the top will be expanded by the CVS to contain useful information:

Shorter inline comments may be added after a property, preceded with a space:

Right-To-Left

Drupal supports conditional loading of CSS files with specific override rules for right-to-left languages. For a module, the override rule should be defined in a file named -rtl.css, eg. node-rtl.css. For a theme, the override rule should be defined in a file named style-rtl.css. The rule that is overridden should be commented in the default CSS rule.

From node-rtl.css:

Rules in node.css which will be overridden if the rtl.css file is loaded:

See also: http://drupal.org/node/132442#language-rtl

As a rule of thumb, add a /* LTR */ comment in your style:

• when you use the keywords, 'left' or 'right' in a property, e.g. float: left;
• where you use unequal margin, padding or borders on the sides of a box, e.g.
  
  margin-left: 1em;
margin-right: 2em;
• where you specify the direction of the language, e.g. direction: ltr;