CSS: Style the Non-Obvious

Published on Mar 18, 2009 (updated Feb 5, 2024), filed under development, css. (Share this post, e.g., on Mastodon.)

This and 133 other posts are also available as a 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 examples.

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?

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

The novice or 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 (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 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 an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma).

I love trying things—in web development and engineering management, but also in politics and philosophy, where I hold to one idea in particular: that we can only be well if we take good care of everyone. Here on meiert.com I talk about some of my perspectives and experiences. (Please share feedback: Interpret charitably, keep it friendly, but do be critical.)