There you are doing the right thing semantically marking-up your new site with div tags, CSS classes and ids. Your presentation is nicely separated from your content. Your feeling pretty good about yourself and your new application. Then ‘it’ happens, you open your site in another browser and suddenly you find yourself a victim of the browsers wars and cross-browser compatibility.

The CSS Reset technique is something that I tried recently on a clean-slate project with great success. Below is SASS version of the CSS file from the above link.

// public/stylesheets/sass/application.sass
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline

\:focus
  :outline 0

body
  :line-height 1
  :color black
  :background white

ol, ul
  :list-styles none

table
  :border-collapse separate
  :border-spacing 0

caption, th, td
  :text-align left
  :font-weight normal

blockquote:before, blockquote:after, q:before, q:after
  :content "" 

blockquote, q
  quotes: "" "" 

The basic idea behind the technique is to normalize all of the tags you are going to use. The technique does have its critics for being over semantic, but for a guy like me who would rather concentrate on APIs and core functionality then learning and hacking around with all of the browsers differences this reset technique is exactly what I was looking for.

I’m not looking for a pixel perfect layout/design, I’m looking to mark-up my layouts and views and move on.