The cause – but not the fault – lays with Eric Meyer’s original CSS reset, subsequently included in the YUI CSS framework, among others.

Eric warned that he didn’t “recommend that you just use this in its unaltered state” but people did so anyway. Including the code:

:focus {
  outline: 0;
}

The problem became so widespread that Eric has apologised for it, even though it wasn’t his fault people ignored his advice! In the second version of his reset, he removed the code above.

At Soupgiant, we take a two-fold approach to link focus styles. We leave the outline in place because users have come to expect it. To increase the contrast of focused links further, we reverse the foreground and background colours too.

a:link, a:visited {
  color: #00f;
  background: transparent;
  text-decoration: underline;
}
a:focus {
  color: #fff;
  background: #00f;
  text-decoration: none;
}
a:hover, a:active {
  color: #00f;
  background: transparent;
  text-decoration: none;
}

While it seems we are doubling up on some code, it’s a necessary evil as multiple pseudo-classes can be applied to single a link at once (for example: :hover and :focus).

For the cost of a few extra bytes, we believe it adds significantly to the usability of our sites. For that reason, we’ve included it in Minimum Page: our reset-free, CSS starting point.

My initial thoughts were that a reset style sheet, combined with a base style sheet, was a helpful place to start any web project as it reduces the incidence of unexpected results. I thought it was important for the developer to have her own reset and base styles; blindly adopting someone else’s reset and base style sheets will just lead to a different set of surprises.

While these discussions were going on, I was in the process of developing my own base style sheets, running them against YUI’s XHTML test suite; shortly afterwards I began to regret the decisions I’d made.

I concluded that the best place to start was with my own base XHTML document, something I can start a project with and remove anything that’s not needed for the particular project.

Viewing the source of my base XHTML you’ll see an overly complicated document that will never be used in its entirety on a single project.

<div id="content-body">
  <div id="content-a">
  </div>
  <!-- //#content-a -->

  <div id="content-b">
  </div>
  <!-- //#content-b -->
</div>
<!-- //#content-body -->

In a project with a single column of content, there is no point in dividing the content into content-a and content-b; that’s a deliberate redundancy, I’d much rather highlight a block of code and hit delete than re-write type the code every time I need it. The same process applies for sidebar-a and -b.

None of this is to say that base style sheets are bad, they’re still very useful tools, just that it is important to begin with something to run your styles against.