How to use (and not use) CSS

It's only in these last few days that I've finally "gotten" CSS. It's just like Object-Oriented Programming (OOP), in a way. In OOP, you minimize redundancy and maximize code re-use by moving common elements "up" the hierarchy. With CSS, you do the same: you move common styling information "up" (from the HTML into CSS styles), and in fact you can even move it right out into a separate file. That's what I've done with the current design for wincent.dev; there's only one style sheet on the whole website, and every other page makes use of it.

There's a clear advantage there in terms of style re-use. Change that one style sheet and everything else gets updated automatically.

But it wasn't until I read this excellent tutorial on CSS selectors by Max Design that I realized there was another benefit that I hadn't seen before. I suddenly realized how much cleaner my HTML could become if I just started using selectors wisely. Use selectors wisely and you'll not only move more styling information "up" and out of your HTML, but you'll get the corollary benefit that your HTML source is infinitely more readable and better looking.

The key thing to bear in mind is this: Override existing HTML elements to produce the look you want.

You can also think of this conversely, as: Don't write special classes for each and every type of element.

Applied judiciously, these two little ideas will help you to write shorter, more compact style sheets, and much better looking HTML. Let's demonstrate this by looking at an example of what not to do. Imagine a web page that has the following content:

<div id="container">
  <p class="subheading">Acknowledgements</p>
  <p class="body-paragraph">Thanks to everybody at WorkCo, my family, and my lovely children.</p>
</div>

Imagine that it also has some other content in a sidebar:

<div id="sidebar">
  <p class="sidebar-subheading">Links</p>
  <p class="link-group-heading">Webmail providers</p>
  <ul class="sidebar-link-list">
    <li class="sidebar-link-list-item"><a href="http://mac.com/">mac.com</a></li>
  </ul>
</div>

This is an atrocious example of CSS gone wrong. You can imagine the entire site peppered with hundreds of different styles, and the accompanying, gargantuan, style sheet. It's true that the author has moved lots of HTML attributes out of the HTML, but it's been only to replace them with a myriad of CSS class names. All of this looks very difficult to maintain; the class names are hard to remember and easy to misspell. There are too many of them.

With intelligent use of selectors the same examples could be written like this:

<div id="container">
  <h3>Acknowledgements</h3>
  <p>Thanks to everybody at WorkCo, my family, and my lovely children.</p>
</div>
<div id="sidebar">
  <h3>Links</h3>
  <h4>Webmail providers</h4>
  <ul>
    <li><a href="http://mac.com/">mac.com</a></li>
  </ul>
</div>

Notice how the result is much cleaner. The only CSS visible now are the two ids, "container" and "sidebar". The use of standard HTML elements like <h3> means that even in ancient browsers which don't support CSS, the logical structure of the page will at least be visible, even if the exact appearance is not. The example in question is very short, but if you imagine it applied to a page with a complicated structure or lots of styles, then the benefits soon become evident.

The key to writing clean HTML like this is to use CSS selectors intelligently. In the example above, we can control the style of the various elements using CSS like the following. I haven't actually shown the style information, but I've indicated the selectors we could define to target the element we wish to control:

#container { /* appearance of things in "container" */ }
#container h3 { /* what do headings look like in "container"? */ }
#container p { /* what do paragraphs look like? */ }
#sidebar { /* appearance of things in "sidebar" */ }
#sidebar h3 { /* major headings in "sidebar" */ }
#sidebar h4 { /* minor headings in "sidebar" */ }
#sidebar ul { /* lists in "sidebar" */ }
#sidebar li { /* list items in "sidebar" */ }

In keeping with what I said about moving things "up" the hierarchy, you can use selectors to define the look of things in higher-level elements of the page, like the "body" element, or something fundamental like the "p" element. By doing this you minimize the amount of repetitious styles you need to define in your style sheet. And you're not forfeiting any control; notice that even though you use the same ("h3") tag in two different places, you can still independently control the appearance of each instance.

Selectors are incredibly powerful things. You're not just limited to saying "class X should look like this", nor even things like in our example above, "element Y should look like this whenever it appears inside Z". You can define targets like "element A should look like this whenever it appears inside a B, which appears inside a C, which appears inside a D", or "element E should look like this whenever it is immediately preceded by element F", or "element G should look like this only when its immediate parent is element H", and so forth. The level of control possible is truly impressive. It's this kind of control that makes the dynamic menus that you see above in the navigation bar possible (see this article by Eric Meyer for a description of the idea that's behind the effect); all of this is down without any JavaScript whatsoever, and it's pretty much guaranteed to work in your browser (you're not using Internet Explorer, are you?...)

Conclusion

The core thing to take from this article is that piece of two-side advice:

• Override existing HTML elements to produce the look you want.
• Don't write special classes for each and every type of element.

And do visit the select tutorial referred to above so you can learn about the all the ways in which you can use selectors to write better CSS.