« Previous Main Next »

CSS Resets

Profile picture for Mat Hampson Mat Hampson

Post categories:

15:20 UK time, Tuesday, 20 October 2009

Hi, I'm Mat, and I work on bbc.co.uk's page layout system, Barlesque. You may have seen it, and its amusing name, discussed before over on the BBC Internet blog, but here I'm going to give you a bit more of a technical insight into how it actually works. Before that though, a quick 140 characters on what it actually does:

Barlesque delivers the head and foot of every page on bbc.co.uk, as well as all the pan-site modules: registration, survey, advertising etc.

There's lots of things I want to talk about at some point: download efficiency for millions of page views per day, writing front end code to play nicely with other people's code, making Barlesque available on lots of different server environments, and so on. However I'm going to start with one of the very first client-side features we wrote: a CSS reset.

Resetting the scene

A CSS reset is a snippet that zeroes CSS values for all elements - zero padding and margins, no borders, 100% font sizing and so on. They've been around far longer than Barlesque, for example this one from (the extremely smart) Eric Meyer.

When investigating them for Barlesque, we pretty quickly decided a reset would be of overall benefit to developers on bbc.co.uk: we have a lot of browsers to support and zeroing everything would get rid of those inconsistent default values, like paragraph margins for example, that different browsers have. Also, with so many developers swapping code, moving around the business, debugging each others work and so on, it would be a big win to have everyone's stuff starting from the same known base.

Looking round, though, there were a few things used in some existing resets we weren't so keen on; for example:

Screenshot of Firebug's CSS inspector showing the potential repetition caused by a 'noisy' reset

  • Setting a load of values on every element, particularly containing elements like <div>s, makes a right mess of Firebug's CSS inspector - it's a long statement, and if you nest some elements (e.g. an <a> in an <li> in a <ul> in a <div>) then Firebug puts it in the pane multiple times (as shown in the screenshot opposite).
  • Some stronger resets were putting font-weight:normal on strong, taking the italics off, or other things which I felt would break developer expectations.
  • Outline was sometimes removed, however it's important for keyboard navigation.

So we made a key decision for our reset: We'd only change values that varied between browsers. For example since all browsers default to zero margins, padding and borders on a div, we left it alone in the reset.

We did this by making some sample content using all commonly used elements and trying it in lots of browsers. For the fine tuning we took a screenshot the content, then setting that picture as the background to the file so we could see if other browsers overlaid it perfectly.

In doing this we were also able to break the reset down into multiple declarations, thus ensuring it didn't interfere too much with Firebug.

Here's a css file containing the uncompressed reset code as it stands now.


Of course, there were one or two 'issues' along the way. In the process of trying to get the test page to look consistent, we used list-style:none; on lists, which breaks expectations and causes support queries to this day, but which we can't change without breaking backward compatibility. (Sorry about that, bbc.co.uk devs.)

A more major thing we'd consider changing if we got to do it again is that we'd probably avoid zeroing typographical values, instead applying default padding, margins and header sizing. This wouldn't require any more CSS for those who didn't want the default, but would mean those who didn't mind it would need no code at all. You live and learn. Instead we've provided a default typography class to help those without a specified typography in their designs.


So that's the basic reset. However, as mentioned before, developers do share code quite a lot around the site. This sometimes means dropping one developer's front end code into a page amongst another's. We thought it would be handy if the reset was available as a CSS class as well, to act as the foundation for embedded snippets. This did mean making more declarations, because it has to override what the sites may have defined, rather than just what the browsers differ on. It's also made more verbose by having to prefix all the elements with the class name (in this case "blq-rst") so this one really does make a mess in Firebug... but at least it's optional.

Coincidentally, the first customer for this reset class was actually Barlesque itself: the masthead and the footer of the page were exactly the sort of snippets that could do with a bit of protection from page-wide declarations made by the sites. Add .blq-rst and they stay looking ok, as this test page shows.

Of course, Everyone has their own take on these things, so comments and suggestions are welcome as always.


  • Comment number 1.

    I tend to go with a fairly broad reset (typically based closely on YUI’s reset+fonts+base), but override the elements within a page's primary content area (as well as a couple of other places) to more match usual expectations. Thus, things like headers and footers have a blank slate, as well as other assorted “special” elements (which would otherwise typically end up with a margin: 0; padding: 0; applied to them), but body text has sane defaults. I rarely stick with YUI’s default font-family inheritance chain of Arial → Helvetica → generic sans-serif, because Arial is a terrible typeface.

    The other thing I tend to do is kill margin-top on pretty much everything except a footer, and rely on padding-top and margin-bottom to achieve consistent effects. This makes it massively easier to absolutely-position elements adjacent to statically-flowed elements appearing within the same (position: relative;) container.

    In contrast, with a default top/bottom margin of, say, 1.25em on a paragraph or heading, you’ll end up with a 1.25em space at the top of any absolutely-positioned containers whereas the top-margin on statically-flowed counterparts would get collapsed.

    The only other thing of any note I tend to do is sizes: verticals are ems, principally, whereas horizontals are percentages or pixels, depending. There are exceptions to this rule, but generally it means that pages will look decent when the font size is increased, without causing unnecessary horizontal scrolling.

  • Comment number 2.

    thanks for posting your reset code. I've been using one of my own but I'm interested in how you guys are doing... I may have to borrow some ideas :)

  • Comment number 3.


    Thanks, for the information regarding the CSS Resets...

    ~Dennis Junior~


BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.