* { margin: 0; padding: 0; } No Longer Cool

Avatar of Chris Coyier
Chris Coyier on

One the techniques I have advocated using for a long time is this:

* {
  margin: 0;
  padding: 0;
}

This is part of the “CSS Reset” theory which helps keep your designs consistent across browsers, a very good thing. This technique works on all browsers, so I never really considered any negatives. That is, until I read this post by Christian Montoya who points out:

This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

I think he makes some good points there. He may be right about the rendering engine thing, although I’ve never really had any serious problem with load times and I’ve used this technique on tons of pages. I think keeping image sizes optimized is the big one there. But the default submit buttons is certainly a concern. In fact, if you are using Firefox or Opera to view this site, you will notice that the “Say it!” button that you need to press to submit a comment has been stripped of it’s nice default style and now just looks like normal text with a border around it. Not very ideal. If you are using Safari, it uses the default Safari-style button, which is nice.

I guess I’m still up in the air whether I will continue to use this or not. I think I probably will if I can figure out a nicer way to handle inputs/textareas.