5 September, 2010

Written by on CSS Wizardry.

There are countless tutorials on the Internet that preach about exactly how you should write your CSS. From trying to enforce single-line syntax, to specifying the number of spaces you should use and where, I wholeheartedly disagree with any articles of this kind. Your CSS can look however you choose, it just has to be readable, sensible and efficient.

A method I’ve recently become fond of requires the mass setting and tactical unsetting of style rules across elements. I’ve been toying with a way of explaining this method for a few days now, but I just can’t think of a way to word it. I’ll have to rely on code examples, instead…

Take the following, long winded way of styling a <h1> and a <h2>:

<code>h1{
  font-family:Helvetica, Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  margin-bottom:20px;
}
h2{
  font-family:Helvetica, Arial, sans-serif;
  font-size:1.5em;
  font-weight:bold;
  margin-bottom:20px;
}</code>

This of course could be written as the much more condensed:

<code>h1,h2{
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  margin-bottom:20px;
}
h1{
  font-size:2em;
}
h2{
  font-size:1.5em;
}</code>

However, for all this is more efficient, it can be taken further still:

<code>h1,h2{
  font-family:Helvetica, Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  margin-bottom:20px;
}
h2{
  font-size:1.5em;
}</code>

Here we give both the <h1> and the <h2> the same font size (this being the value we want the <h1> to use) and then override/unset this value on the <h2>.

Another example…

<code><span class="code-comment">/* OLD */</span>
ol,ul{
  margin-bottom:20px;
  font-style:italic;
}
ol{
  list-style:decimal outside;
}
ul{
  list-style:square outside;
}
<span class="code-comment">/* NEW */</span>
ol,ul{
  margin-bottom:20px;
  font-style:italic;
  list-style:decimal outside;
}
ul{
  list-style:square outside;
}</code>

I’m afraid I can’t really offer any more verbal explanation of this technique but the code examples should explain well enough. If you do have any questions though, pop them in the comments.