Drupal CSS Coding Standards

March 13, 2008 - 9:02am

On the #drupal IRC channel, Excallibur points out that there are no coding standards for CSS. I'd like to propose some straightforward ones.

Note that I am not intentionally omitting indentation within rules, but am having trouble with my code filter.

I. CSS is not Java.

This java-style of CSS does not make the code easier to read:

#rule1
{
margin:0px;
}

It just adds an unnecessary space. Below is the correct way, which is consistent with core CSS.

#rule1 {
margin:0px;
padding:1em;
}

II. Two selectors = Two lines.

While the following code is more compact, it's also more difficult to scan.

#rule1, #rule2 {
margin:0px;
padding:1em;
}

The right way is separate lines.

#rule1,
#rule2 {
margin:0px;
padding:1em;
}

This small rule can make a big difference in complex themes (ever tried to debug some old civicspace themes?).

III. Single Line Rules

Single line rules are acceptable when there is only one selector and one property.

a {text-decoration:none;}
pre {font-size:1em;}

Can you think of any others? Disagree?