After reading this article I'm thinking to move eric meyer reset to global reset, would it be wise move?

Question

After reading this article I'm thinking to change my css reset from eric meyer reset to global reset * {margin:0;padding:0}

or thinking to use like this only

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, textarea, p, blockquote,
th, td, a {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: none;
    vertical-align: baseline; }

table {
    border-collapse: collapse;
    border-spacing: 0; }

li { list-style: none; }

Answer 1

I'd disagree with the 'disadvantages' of resetting, and say that basic CSS resetting is actually good, and the so called speed hit is practically non-existent as browser engines are fast enough to do the inheritance cascading - that's why they're called cascading style sheets.

Answer 2

I've heard from a lot of smart people that * { margin:0;padding:0 } is processor intensive, since it has to reset every element, although I've never seen any tests done. But since yahoo and eric meyer recommend a more comprehensive stylesheet i've been going that route.

Here's a site where Paul O'brien briefly discusses what i'm talking about. He also states he's never seen a difference in load time, i just figured i'd mention it.

Answer 3

Global resets will screw with form input formatting. If you are not using forms, you can get away with it. Otherwise, selective resets give more manageable results.

I've actually expanded Meyer's reset to do some force block-level HTML5 elements to style properly as well: http://kingdesk.com/articles/css-reset/

Answer 4

I use a slightly changed version of CSS Reset with no problem at all:

/* @group ntz css reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none}

strong, b {font-weight:700}
em, i {font-style:italic}

ins {text-decoration:none}
del {text-decoration:line-through}
table {border-collapse:collapse;border-spacing:0}
caption, th, td {text-align:left;font-weight:100}

textarea {overflow:auto}
button {cursor:pointer;padding:0}
*:first-child+html button {width:1;overflow:visible}
* html button {width:1;overflow:visible}

input[type="checkbox"], input[type="radio"], input.radio, input.checkbox {vertical-align:text-top;width:13px;height:13px;padding:0;margin:0;position:relative;overflow:hidden;top:2px}

a {text-decoration:none; color:#4f81bd}
a:hover {text-decoration:underline}

:focus {outline:0}
a:focus {outline:1px dotted #999}

/*  -----------------------------------
    smart and dirty
--------------------------------------*/

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

/* @end */

The * {} solution is a good one for quick projects. For bigger projects you may want to use a real reset, even if you gain few extra kb in your source code. You just need some consistency over browsers...

Answer 5

I found this way way is better then original Eric meyer reset

http://jasonkarns.com/blog/2010/02/15/css-reset/

http://github.com/jasonkarns/css-reset/blob/master/reset.css

Answer 6

A more appropriate approach to reset stylesheets is to make them part of your main CSS and amend them on a per-project basis.

For example, many reset stylesheets have this line:

body{line-height:1;background-color:white;color:black}

But it may be the case that you are going to use a different background-color on your body, so you would define this in your own project stylesheet.

body{background-color:black;color:white}

By placing your reset in your main stylesheet, and considering it as a "base" instead of "reset", you can replace the reset values with what is more appropriate to your project. You can then also chop out the bits that aren't relevant to your project, for example you may never use tables on a particular site, so why include a reset for them? Here is my "base" from a recent redesign of my work website:

NOTE: This is specific to my work site and may not be appropriate to your own project, use only with careful consideration.

/* @group Base */
html,body,div,span,h1,h2,h3,p,a,ul,li,small,footer,header,hgroup,section{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
  :focus{outline:0}

  html,body{background-color:#fff;color:#000}
    body{line-height:1;font-size:87.5%;font-family:"ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",Georgia,Times,'Times New Roman',serif;width:890px;margin:0 auto;position:relative}

  /* @group Text Formatting */
    p{margin-bottom:5px;font-size:1em;line-height:1.4em}
  /* @end */

  /* @group Links */
    a{color:#B11C2D;text-decoration:none;-webkit-transition:color 0.3s linear}
    a:visited{color:#6d2831}
    a:hover,a:focus{color:#000}
  /* @end */

  /* @group Lists */
    ul{list-style:disc outside none;margin:1em 1.5em}
  /* @end */
/* @end */

I trimmed out what I didn't need, and made sure I wasn't overriding the base later by replacing the reset values with what I needed as a base. This is at the top of my screen.css file and is followed by styles not part of the base (such as positioning of the <header>).

Finally, reset stylesheets are not set in stone. You can edit them as you feel appropriate to make more suitable bases for your web projects. If you want to retain 'outline' on links for keyboard navigation, then edit your reset to allow for this. Create your own base CSS and then repurpose it as appropriate on each project.

Answer 7

I agree almost 100% with that article. Globally resetting elements is messy and slow. Even using the global * selector is not necessary - you hardly ever want to set margins and padding to 0 anyway, and many elements (such as div and the inline elements) don't have margins or padding by default in any browser.

Furthermore, it may not even matter if there are some margins on an element. Look at this page's title - would it matter if the margin was 1.2em instead of 1.1em? Hardly.

Just set a nice baseline for all the elements you want to use. Something like this:

body {
  font: 13px/1.3 verdana, sans-serif; /* change to desired value */
  margin: 8px; /* change to desired value */
  padding: 0; /* change to desired value */
}

h1 {
  font-size: 1.8em; /* change to desired value */
  margin: 1em 0; /* change to desired value */
}

a img {
  border: 0; /* removes border on linked images */
}

table {
  border-collapse: collapse; /* personal preference */
}
table th,
table td {
  padding: 3px; /* change to desired value */
}

...etc etc. You get the idea.

Answer 8

Don't think you can move from Eric Meyer to Global after the project is done.

I have seen a lot of newbies using the Global "reset" and those kids mess everything up because they don't have a basic understanding of what browser defaults need removed for cross browser consistency.

But I think this Eric Meyer vs. Global might be a more philosophical than just CSS. There are a growing number of devices out there to present websites on. The presentation layer is not going to look the same on a Blackberry, iPhone, iPad, or digital signage. People in the Global camp say websites need to look GOOD... but not exactly the same. People in the Eric Meyer camp say they DO need to look consistent and GOOD across browsers and devices to whatever extent possible. A fine goal, but time consuming. It reminds me of the early days of the web when people were still trying to make print look exactly the same as on the web. I'm still in the Eric Meyer camp because it makes my life easy, and my code maintainable... but the days of homogeneous presentation layers are coming to an end.