ΒιΆΉΤΌΕΔ

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 ΒιΆΉΤΌΕΔ 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 .

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:

• 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 .

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.

regret.css

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.

Classy

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.