I'm trying to come up with a building starting point for my future CSS projects. The reset.css is actually a custom combined version of various popular reset.css from Eric Meyer and so forth. Really want to listen to you about how can I make it better, more versatile and scalable. Just talk about what you'd do with your own. global.css @charset "utf-8"; @import "reset.css"; [B]*[/B] {font-size:100.01%;overflow:hidden} [B]html[/B] {font:normal 62.5%/1.6 Arial, Verdana, Geneva, sans-serif} [B]body[/B] {font-size:1em;line-height:1.6} Code (markup): reset.css @charset "utf-8"; /* reset.css by yang yang v1.0 | 20080415 */ [B]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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td[/B] { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } [B]address,caption,cite,code,dfn,em,strong,th,var[/B] { font-style:normal; font-weight:normal; } [B]h1,h2,h3,h4,h5,h6[/B] { font-size:100%; font-weight:normal; } [B]sup[/B] { vertical-align:text-top; } [B]sub[/B] { vertical-align:text-bottom; } [B]body[/B] { line-height: 1; } [B]ol, ul[/B] { list-style: none; } [B]blockquote, q[/B] { quotes: none; } [B]blockquote:before, blockquote:after, q:before, q:after[/B] { content: ''; content: none; } [B]:focus[/B] { outline: 0; } [B]ins[/B] { text-decoration: none; } [B]del[/B] { text-decoration: line-through; } [B]table[/B] { border-collapse: collapse; border-spacing: 0; } [B]input,textarea,select[/B] { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ [B]input,textarea,select[/B] { *font-size:100%; } Code (markup):
I've tried and I've tried, but no matter how I try to justify a "universal reset", I can't find any sane reason to bother. I am comfortable that I know the various default stylesheets well enough to deal with particular issues without having to nuke them. Rather than setting everything to zero, then resetting everything again to my preferences, I simply set those things that need setting. No fuss, no muss. cheers, gary
I'm inclined to agree. However... I still use one for no other reason than I'm use to it. I started using one (although not nearly as aggressive as the OP's) years ago and just can't drop the habit. It's what I'm used to and I'm so used to it I can't be bothered to not use it. In response to the OP though, I think it's a bit much. For what it's worth, all my stylesheets start off with this: @charset "utf-8"; /* * Make all browsers equal */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{ margin:0; padding: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} Code (markup):
I never know when my page will need to look pixel perfect (if the design were to change for instance) in all browsers so I use one, but usually it's just * { margin: 0; padding: 0; } img { border: 0; } (if I have forms on the page, then it's img, fieldset {border: 0;} instead) ul, li { list-style: none; } Because there's no way I'm setting border: 0 on every single image, margin: 0 and padding: 0 on most of my elements, or list-style: none on 99% of my lists. I'm just too damn lazy for all that work. Plus I'm a control freak. I'm suspicious of gaps between my elements esp in IE6 and without a reset I never know if it's just a browser padding-margin default or if it's a bug.