Drupal CSS Coding Standards

Drupal CSS Coding Standards


Add Comment
Source
Tutorials
Bookmark/Search this post with:
Delicious Delicious
Digg Digg
StumbleUpon StumbleUpon
Facebook Facebook
Google Google
Yahoo Yahoo
Technorati Technorati
13
Thursday, March 13, 2008
By admin
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?

read more

Leave a Reply

Your email address will not be published. Required fields are marked *