Programming Blog

Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.

“base.css” versus “reset.css”

For a long time, the very first line in my styles sheets was:

* {padding:0;margin:0;}

This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.

Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.

Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.

Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:

1. by the browser’s styles sheet (see User Agent Styles Sheets).
2. by the “reset” file.
3. by the author’s styles sheet.

Criticism of this Approach

Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: “Wouldn’t a well written base style sheet render a reset style sheet redundant and therefore useless?”

Actually, I believe Eric Meyer himself hints in that direction when he says:

“I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness.”

In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:

• iframe
• applet
• strike
• u
• font
• s
• center

My Base Styles Sheet

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.

What does it do that a reset doesn’t?

It fixes a few things

• It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
• It includes an IE button width fix
• It removes “sticky” outline (not in Internet Explorer though)
• It prevents “mysterious gaps below images“
• It prevents descenders letters in legend from being cut-off in Internet Explorer
• It vertically aligns checkboxes and radio buttons with their label
• It sets a default color background for the document with no shrink wrap effect on body¹

It styles lists by default

It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.

It creates vertical “gutters”

Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.

Why using padding instead of margin to create that space?

Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not seeked, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).

It creates horizontal white space too

• Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
• Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
  • Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
  • Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.

What else?

Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.

You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).

My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.

¹ The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.

Go to Source