Set then unset (or reset...?)

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.


Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q1–2 2017

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

  • Talk

    DEVit, Thessaloniki, (Greece) May 2017

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.