Where do people stand on CSS resets?
I used to use
CODE
But I’ve been reading recently that a lot of people don’t use this anymore as it creates more work later on by cancelling margin and padding on certain elements which need margin and padding, such as form elements.
Is it best to reset default styles only for certain elements, or just let the browsers do their thing?
Well I tend to use CSS resets (the one you described) on margins and padding purely out of personal preference because I am used to resolving issues as they arise (in relevance to how resets handle such properties). There is an argument for not using them (especially with forms) but I don’t tend to encounter many problems and being perfectly honest I prefer working from zero rather than the browser defaults because it let’s me be explicit. It’s really a matter of personal choice. 
Yes you lose the depressed effect when you click a form element that can’t be re-instated and is a big accessibility issue as the element no longer behaves like a button.
There are also issues with selects and other elements so its best not to mess with them unless you know what you are doing. I explained the issues with form elements a few years ago in an article here.
On a large site *{margin:0;padding:0} could have performance issues (probably not that noticeable but has been reported) because you are asking the browser to go though every element.
The simplest answer is to reset the elements as you go and only on the elements you use. This will give you a greater understanding of how things work.
Even if you do use *{margin:0 padding:0} the first thing you do is something like this.
p {margin:0 0 1em}
Therefore you have wasted your time with the reset because you have just re-defined it again. In fact every element you use you will want to define the margin and padding specific to your requirement so resets are basically extra redundant code in most cases.
If you remember that elements like html,body,form,h1,hn…,ul,ol,p all have defaults and just set them as you use them then you won’t need a reset.
Resets are basically for beginners who don’t understand how things work or maybe when you pass a completed project to an inexperienced client and you want to make sure that they can add elements without causing ill effect.
I do tend to use a shortened reset style sheet when I hand work over to clients and previously I used resets rather than the global reset (* margin:0;padding:0).
I find reset stylesheets very helpful. This is the one that I use.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,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;}
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;}
li {list-style:none;}
I wouldn’t agree, I think they can be a useful tool for setting a benchmark and working around the inconsistencies browsers can produce (I’ve seen a noticeable decline in quirks within IE6 when the universal margin / padding reset is used), though it’s mainly based on my own wacky experiments.
This seems contradictory. You first seem to be against CSS Resets, then point to Eric Meyer’s Reset as something you use yourself.
Respectfully Paul O’B, without trying to be combative, I disagree with you…almost completely.
I wouldn’t call Eric Meyer, or [URL=“http://elliotjaystocks.com/starkers/”]Elliot Jay Stocks, “beginners who don’t understand how things work”, and they preach the use of resets.
As a matter of fact, if anything, using a CSS reset of any kind should actually help you to learn more about how things work.
Not using a reset puts one’s design at the mercy of the defaults set by different browsers. What’s worse is that different browsers have different defaults, thereby making a design different across multiple browsers. This could very well leave an amateur banging their heads against a wall wondering why their page looks different from browser to browser, while a CSS Reset might have circumvented the whole debacle.
“If” you plan on using your own form element images, and therefore not dependant on browser specific implentation of form stuff, then *{margin/padding} works for me. “If” I don’t declare a reset of any sort, and reset as I go (p{margin:yada}), and I run into a browser dif (a thousand times), then I can’t rule out it’s not some “lack of reset” issue happening. So basically, a reset (of any sort) helps debugging for me - of the bat, it rules out issues, and therefore, helps to lead me to the real culprit.
Hey GoodEgg, I don’t think you read Paul’s post very carefully. He said he uses a reset if he’s handing work over to clients–i.e. to save them from making their own mistakes.
Although I haven’t weaned myself off resets, I admit it’s purely out of laziness. As Paul says, if you style elements as you use them, browser inconsistencies don’t apply, as you override them with your styles.
Each time this topic comes up now I like to provide links to Gary Turner’s comments, which I enjoy reading:
That’s fine - everybody can have their own opinion
As a matter of fact, if anything, using a CSS reset of any kind should actually help you to learn more about how things work.
Actually I think the opposite is true. In most cases authors don’t give the reset code a second thought. It’s a cut and paste job done without any thought whatsoever. I don’t think much at all is learned that way although as I already said it may help beginners initially get their pages looking better but doesn’t real help with their understanding of the problem at all.
It’s only when you do it by hand (by one element at a time) that you realise that certain browsers apply left margin by default for the bullet space while others apply left padding that you can start to come to terms with what is actually going on.
Not using a reset puts one’s design at the mercy of the defaults set by different browsers. What’s worse is that different browsers have different defaults, thereby making a design different across multiple browsers. This could very well leave an amateur banging their heads against a wall wondering why their page looks different from browser to browser, while a CSS Reset might have circumvented the whole debacle.
That seems to back up what I said about it being “good” initially for beginners so I think you are actually agreeing with me there
This seems contradictory. You first seem to be against CSS Resets, then point to Eric Meyer’s Reset as something you use yourself.
In a way, I suppose I am.
I am not against resets but I think they are unnecessary for designers who know what they are doing. You really only need to address the elements you use - end of story. As long as you are in control of the design then that approach is all you need.
The problem is that I code mainly templates for other designers/clients who take the initial template I build and then they go away and build their site from it. I may do 4 or 5 different templates a week for different customers and may never get involved with the design again. Therefore I usually end up placing some sort of stripped down reset just to protect the client from doing something silly. (e.g. I’ll make sure lists have defaults that work and remove margins from forms etc).
Even Eric Meyer (one of my heroes) says don’t take the reset at face value.
In other words, this is a starting point, not a self-contained black box of no-touchiness.
The main problem I have with reset stylesheets is that they are full of redundant code. The reset sets everything to zero and then as you start coding your page you start adding things back in (unless you want it all squashed together).
You’ve already set headings and p element to zero margin but within a few lines of code you’ve changed them to something different making the original code redundant. Why not just do it right once?
@ ralph.m and Paul O’B
Perhaps I did read through too quickly. Ah, the hazards of multi-tasking at my laptop…
I consistently use a reset as well, maybe a little out of laziness but mostly so that if I’ve not styled an element somewhere in my style sheet, then I can sleep knowing the client won’t suffer any cross-browser inconsistencies because those elements are zero’ed out anyway.
It’s not a mandatory requirement to use a reset - but I’ve found it can help you to stop repeating yourself stop repeating yourself. I’ve done it both ways, and I don’t feel strongly that the resets have helped me largely.
Paul, do you have philosophical objections to javascript bench-levelers like ie7.js and ie8.js to give more consistency to the implementation of css?
The only problem I have with those is what happens if JS is disabled? Is the site completely broken because you haven’t fixed the original errors or bugs?
If you make sure the page is working without those scripts first and then use the scripts for progressive enhancement then that’s ok. However I feel that most users simply throw the script in place without thinking about the consequences.
Personally, I would rather not use them but they obviously work and are well programmed. If perhaps you wanted to emulate position:fixed in IE6 then you could use the script rather than relying on complicated hacks but there is always the issue of what happens if the script is not loaded. In most cases this would cause the layout to break unless the original lack of support is addressed in some way first.
AFAIK, there is no reason to include this declaration(border-spacing:0), primarily because you declare the value ‘collapse’ for the property border-collapse.