Everyone likes a reset and no site is complete without one. 

So why another one?

Everyone has their favourite, be it Eric Meyer's (which heavily influenced mine) or Yahoos! A common criticism of these resets is that they often go too far and aren’t suited to CMS driven sites. As HTML5 use rises we have new tags to contend with and ensure they act the same cross browser. 

I’ve added a sample test page to sit alongside my reset to demonstrate what is does and doesn’t do. You can see the CSS on this page or just from the example page

Explanation

First block of code.

 

This covers the main family of tags used in websites excluding applet, big, kbd, s, samp, var, b, tt and center, which are either depreciated or not commonly used. Lists are left out of here and treated separately.

article, aside, footer, hgroup, nav, section

{

display: block;

}

This ensures older browsers, such as IE6 and Firefox 2, display these tags as block level elements. 

Body

This adds some basic core styles to the body tag. Any variations on background and text colour can then be added in the generic or a page specific style sheet (more on which later)

Blockquote and q

Set to use a single quote, with padding around the blockquote to separate it from any surrounding content.

Mark

Set to italic with a yellow background to highlight the text

Lists

Both unordered and ordered lists are set to display their default values. This is useful for CMS generated content which will rely on list styling. Unordered lists drill down from disc, circle to square. Ordered lists drill down from numbers, roman numerals to lowercase letters.

Lists in navigation and forms, where the developer will not want the default styling have this removed by wrapping them in either the nav or form tag.  Navigation list items are floated left as this is most commonly used.

Common classes

Additionally it is useful to have a selection of global classes for use across projects. ‘clickable’ is useful in scripts that add click events to tags that aren’t links or buttons, such as headings in FAQs. 

As hr tags are difficult to style it is useful to use <div class=”hr”><hr/></div> as this allows hrs to be styled more accurately without affecting semantics, such as custom background images or borders. 

When debugging JavaScript it can be useful to display variable’s values on screen, the ‘debug’ class is useful. The font tag is used as it is unlikely to adversely affect any other site content. 

 

Other style sheets?

Resets base themselves on the assumption the developer will use additional style sheets or further styles after the reset is declared. How this is done is entirely up to the developer or any coding standards a team works with.

This would be where any different styles to the body tag would be added.