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>:
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;
}This of course could be written as the much more condensed:
h1,h2{
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
margin-bottom:20px;
}
h1{
font-size:2em;
}
h2{
font-size:1.5em;
}However, for all this is more efficient, it can be taken further still:
h1,h2{
font-family:Helvetica, Arial, sans-serif;
font-size:2em;
font-weight:bold;
margin-bottom:20px;
}
h2{
font-size:1.5em;
}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…
/* OLD */
ol,ul{
margin-bottom:20px;
font-style:italic;
}
ol{
list-style:decimal outside;
}
ul{
list-style:square outside;
}
/* NEW */
ol,ul{
margin-bottom:20px;
font-style:italic;
list-style:decimal outside;
}
ul{
list-style:square outside;
}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.
By Harry Roberts on Sunday, September 5th, 2010 in Web Development. Tags: CSS | 10 Comments »
+
j albert bowden II said on 5 September, 2010 at 7:26 pm
can you explain what you mean by more efficient? the second example seems more efficient to me because you’re not re-writing the declaration.
Agustín Amenabar L. said on 6 September, 2010 at 2:04 am
Oh! I’ve been doing this for a while but I wasn’t sure if it was ok, or could lead to problems. But It’s a wonderful way to code, much easier maintenance and hierarchy gets clearer. Glad to know I’m not doing it wrong.
BTW. Are you still going to be riding as much when the season gets colder?
Ivan Nikolić said on 6 September, 2010 at 7:34 am
I use this method now and then, but it all depends on situation. For example, if there are many classes with different background position and same background image, I will give every class coresponding position and leave global selector untouched, for better organization, but if there’s only two elements like in your examples then I will probably set one style and then unset it.
Mark S said on 6 September, 2010 at 8:19 am
While I understand what you are doing, I feel that the stuff contained in h1,h2 (using your example) should apply to both, so setting h2 to 2em, then changing it to 1.5em seems a little backwards to me.
How does this effect those who edit your CSS? (If anyone does) Do they miss that you’ve redefined h2’s size else where (not a great example)
holeycoww said on 6 September, 2010 at 8:24 am
I am currently coding the way example 1 shows. I really should start trying to minimise it, purely to get my work done quicker and easier!
Will see if I can adopt the HR method. Good work Haz!
Glen Wheeler said on 6 September, 2010 at 8:26 am
Good work mate, nice little read for a Monday morning that I’ve taken into consideration. When I write style’s for other clients I always write them in long form, just so they can edit them a little easier.
Harry Roberts said on 6 September, 2010 at 8:45 am
@j albert bowden II: I’d see it as not necessarily more efficient, but certainly more trimmed down. In the final example for the
<h1>,<h2>you only ever write two sets of selectors and thefont-sizeproperty twice, whereas the next best is three sets of selectors and the two properties.@Agustín: It’s certainly a less common methodology, but one that I like. And I’ll be riding whenever the weather permits, as long as it’s not raining!
@Ivan, @Mark: As with anything like this, it needs to be considered in context. If you feel that it might not be obvious, or that it might cause problems/make less sense, then avoid using it. If you are comfortable/confident that it does make sense then by all means use it.
@holeycoww, @Glen: Glad you guys like it, let me know if you utilise it!
James said on 6 September, 2010 at 12:29 pm
I like writing my CSS this way too, I set a global size, weight etc for h1,2,3 etc as a group then just overwrite the font size. It allows you to streamline it but also I personally find it’s a bit easier to maintain.
You could also write
rather than declaring all the different font-family/weight etc bits.
Gabriel Izaias said on 6 September, 2010 at 1:55 pm
I often use this technique on my own. The only thing, I think, that can affect others who edit the CSS is the inheritance.
But I always try to share with every front-end developer the Andy Clark’s article about inheritance (http://tinyurl.com/7ogaq) so they don’t have such problems understanding this technique.
Russell Bishop said on 15 September, 2010 at 11:25 pm
This is a technique I use often when writing CSS. It’s also always a nice moment when you spot an opportunity to use it!