Set then unset (or reset…?) – CSS Wizardry

Spread the love

5 September, 2010

Table of Contents

Another example…

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 and a






:









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  and the 







 the same font size (this being the value we want the  to use) and then override/unset this value on the 







.







Another example…



ol,ul{
  margin-bottom:20px;
  font-style:italic;
}
ol{
  list-style:decimal outside;
}
ul{
  list-style:square outside;
}

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.







Share this:

				Click to share on Facebook (Opens in new window)
				Facebook
			

				Click to share on X (Opens in new window)
				X
			
Like this:
Like Loading...


	Related