0

Unfortunately all HTML standards (including HTML 5) don't include a standard CSS stylesheet. In order to ensure that your web page is displayed (almost) the same on every browser without testing and fixing the stylesheet, CSS resets are often recommended. Various reset stylesheets exist and everything seems to be a bit messy and the opposite of what the web is normally: a reliable standard (excluding Internet Explorer).

How do you deal with this problem? Are there alternatives? What's the best practice?

5 answers

3
points

I use a customised Eric Meyer's Reset as the base for my baseline CSS.

Every browser has its own stylesheet that it uses to render your html. Resetting those browser styles back to a level playing field became popular because designers and clients expect their sites to look exactly the same in every browser.

If you don't need cross browser pixel perfect matching to a visual design, then you don't need to reset browser styles.

Current leading edge thinking is that you should be designing in the browser and setting rather than resetting your baseline CSS.

Further reading:

http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/

http://snook.ca/archives/html_and_css/no_css_reset/

http://meyerweb.com/eric/tools/css/reset/

http://forabeautifulweb.com/blog/about/five_css_design_browser_differences_i_can_live_with/

http://24ways.org/2009/ignorance-is-bliss

http://24ways.org/2009/make-your-mockup-in-markup

http://www.aaronrussell.co.uk/blog/why-designing-in-the-browser-misses-the-point/

Answered over 6 years ago by Tony Crockford
  • I've been using a modified version of Eric Meyer's Reset for a while as well. The idea isn't to just copy the file verbatim and then overwrite the rules in your own stylesheet. Rather, you should use it as a starting point and base your design on tweaking it and removing or replacing the bits you don't need. For example, it doesn't make much sense to get rid of accessibility hints like the dashed underlines on abbreviations, but I never like the default heading sizes. Alan Plum over 6 years ago
2
points

I share your frustration. I wish there was a standard place for a web developer to start with respect to CSS. As far as best practice goes, until a standard exists, pick your favorite CSS Reset and use it consistently.

Answered over 6 years ago by Abinadi Ayerdis
2
points

The question seems a bit odd to me. Since when has the web been anything other than an unreliable, messy place to work? :-)

But to answer, you basically have four choices:

  1. Develop without a reset and just fix any bugs that crop up. (Annoying, but not that difficult most of the time.)
  2. Develop with your reset of choice. (I prefer Blueprint's.)
  3. Develop with the reset you hate least, then strip out any bits you find unnecessary for your project.
  4. Create your own reset.
Answered over 6 years ago by Joshua Clanton
  • I like the idea of creating your own reset. +1 Abinadi Ayerdis over 6 years ago
1
point

I generally don't bother with resets. In fact the only place I notice a significant difference in default browser stylesheets these days is margins and padding on lists.

Otherwise, if the value of a property is important to you, set it to what you want rather than relying on defaults.

Answered over 6 years ago by Richard Grevers
  • Absolutely correct. Rob over 6 years ago
0
points

Well, there is the 'default stylesheet for HTML4' provided by the w3c, though it's only for information (and actually part of the CSS section, not HTML).

I find most of the resets out there pointless. No browser sets a default margin/padding/border on div elements, so why "reset" that? And why zero paragraph margins, when you undoubtedly want space between your paragraphs?

You'll also find debugging using Firebug much harder, since when you look at the applied CSS styles you'll see a huge rule for the element and every parent right up to html.

Personally I much prefer a "set" - so you create an individual rule for each element, say p { margin: 1em 0; } and the other common ones. Set a default font size and face on the body tag. Set image borders to zero. Ignore div and span which are generic and do not have any default styles.

Then just get on with creating the site :)

Answered over 6 years ago by DisgruntledGoat