CSS: Style the Non-Obvious

Published on Mar 18, 2009 (updated Feb 5, 2024), filed under development, css (feed). (Share this on Mastodon or Bluesky?)

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

One of the qualities you have to acquire as a web developer is to see the non-obvious, and to use that skill to your code’s advantage. Let me explain by two simple examples.

<div id="breadcrumb">
  <a href="/">Home</a> →
  <a href="/whatever">Whatever</a> →
  <em>Anyway</em>
</div>

First, let’s take some classic code for breadcrumb trails. What do you do if you like to adjust the styling of the arrow delimiters?

The novice to intermediate web developer will do something like adding another element, for instance a span element (<span>→</span>). Maybe he’ll garnish it with a class. We’ve seen much like that.

The interesting part, as always (recall Gary Klein), is adding in expertise. The markup used in the breadcrumb navigation example leaves plenty of options to adjust styling of the arrows by just using the outer container (#breadcrumb) as a styling hook and to overwrite styling of the inner elements if necessary. For instance, you could use relative positioning for the a and em elements to visually move up or down the greater than signs. This is “styling the non-obvious.”

Another simple and popular case is a plain navigation menu:

<ul id="nav">
  <li>Home
  <li><a href="/however">However</a>
  <li><a href="/whatever">Whatever</a>
</ul>

In practice, if the goal is to highlight the location you’re currently at, many web developers add extra markup, too, like a special ID or class or even another element. In most cases you don’t need to do that, you’d just style the “invisible”:

li { font-weight: bold; }
li a { font-weight: normal; }

…which here allows to highlight the active nav items by a bold font face, whereas the standard items that are all exemplified by an anchor would use a normal font weight.

I’m not sure whether the point needs further explanation just now, I just wanted to get it out. There are reasons why great CSS techniques are great (and called CSS, not HTML techniques). Experienced CSS developers always try not to alter markup to accomplish certain styling.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)