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, but CSS 3.0 is acceptable provided the use can be justified and the principles of graceful degradation are followed.
Selectors
Selectors should be on a single line, with a space after the last selector, followed by a curly brace. A selector should end with an unindented closing brace on a separate line.
.book-navigation .page-previous {
}Multiple selectors
Multiple selectors should each be on a single line, with no space after each comma.
#forum td.posts,
#forum td.topics,
#forum td.replies,
#forum td.pager {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.
- Have a single space after the property name and before the property value.
- End in a semi-colon.
#forum .description {
color: #EFEFEF;
font-size: 0.9em;
margin: 0.5em;
}Alphabetizing properties
Multiple properties should be listed in alphabetical order. Rather than
body {
font-weight: normal;
background: #000;
font-family: helvetica, sans-serif;
color: #FFF;
}you should use
body {
background: #000;
color: #FFF;
font-family: helvetica, sans-serif;
font-weight: normal;
}Properties with multiple values
Where properties can have multiple values, each value should be seperated with a space.
font-family: helvetica, sans-serif;Comments
CSS files should be remarked using CSSdoc syntax.
As per PHP coding standards, block level documentation should be used as follows, to describe a section of code below the comment.
/**
* Documentation here.
*/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.
/* $Id$ */
/**
* @file
* Short description
*
* Long description
*/The CVS ID tag at the top will be exanded by the CVS to contain useful information.
/* $Id: style.css,v 1.15 2008/12/22 15:27:26 keithsmith Exp $ */Shorter inline comments may be added after a property, preceeded with a space.
background-position: 2px 2px; /* LTR */
padding-left: 25px; /* LTR */RTL
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 MODULE-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:
#node-admin-buttons {
clear: left;
float: right;
margin-left: 0;
margin-right: 0.5em;
}Rules in node.css which will be overridden if the rtl.css file is loaded:
#node-admin-buttons {
clear: right; /* LTR */
float: left; /* LTR */
margin-left: 0.5em; /* LTR */
}See also: http://drupal.org/node/132442#language-rtl
As a rule of thumb, you should consider adding 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;