« Getting 100% Height in IE with CSS // Convert DMG to ISO on OS X »

My CSS Reset & Why Not to Use *{…}

Posted on October 9th, 2007 by .: Adam

When I decided to redesign BodyMod.org, my main concern was optimization and speed. That’s why I moved from Classic ASP to .NET, and from Table designed structure to CSS / Div structure.One of the things I learned right off the bat was to clear out the margins and padding to 0px for everything to ensure cross-browser compatibility. The first way I did this was from a quick hack that I found in someone elses source:

*{margin:0px;padding:0px}

This was my first “CSS Reset”. Then I started doing a little more research on this when a friend of mine informed me about an entire file for resetting CSS. Also in my research I found a nice little article about why not to user *{} in anything. the jist of it is that it puts a lot of strain on the browser to process whatever you put into it against everything. Made sense, and when I took it out, it did run a little quicker. So, I ran across a reset file that Yahoo! was using as part of their YUI framework, and I just borrowed that. I mean, c’mon, if Yahoo! uses it, it can’t be too bad.Here’s my reset file in all it’s glory:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:”;}abbr,acronym { border:0;}

Tags: CSS, General //

Discussion Area - Leave a Comment




« Getting 100% Height in IE with CSS // Convert DMG to ISO on OS X »