Question

阅读this article后，我正在考虑将我的css重置从eric meyer重置为全局重置* {margin:0;padding:0}

或者只想这样使用

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

全局重置会影响表单输入格式。如果您不使用表单，则可以使用它。否则，选择性重置会提供更易于管理的结果。

我实际上已经扩展了Meyer的重置以执行一些强制块级HTML5元素以便正确地设置样式：http://kingdesk.com/articles/css-reset/

Answer 2

重置样式表的一种更合适的方法是将它们作为主要CSS的一部分，并在每个项目的基础上进行修改。

例如，许多重置样式表都有这一行：

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

但是，您可能会在background-color上使用不同的body，因此您可以在自己的项目样式表中进行定义。

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

通过将重置置于主样式表中，并将其视为“基础”而不是“重置”，您可以使用更适合您项目的重置值替换重置值。然后，您还可以删除与项目无关的位，例如，您可能永远不会在特定站点上使用表，那么为什么要为它们包含重置？以下是我最近重新设计工作网站的“基础”：

注意：这是我的工作网站特有的，可能不适合您自己的项目，只能慎重考虑。

/* @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 */

我修剪了我不需要的东西，并确保我以后没有用我需要的基础替换重置值来覆盖基础。这是我的screen.css文件的顶部，后面跟不是基础部分的样式（例如<header>的定位）。

最后，重置样式表不是一成不变的。您可以根据需要编辑它们，以便为您的Web项目创建更合适的基础。如果要在键盘导航的链接上保留“轮廓”，请编辑重置以允许此操作。创建自己的基本CSS，然后根据需要在每个项目中重新调整它。

Answer 3

我不同意重置的'缺点'，并说基本的CSS重置实际上是好的，所谓的速度命中实际上是不存在的，因为浏览器引擎足够快继承级联 - 这就是为什么它们被称为级联样式表。

Answer 4

我从很多聪明人那里听说* { margin:0;padding:0 }是处理器密集型的，因为它必须重置每个元素，尽管我从未见过任何测试。但是，由于雅虎和埃里克梅耶推荐了一个更全面的样式表，我一直在走那条路。

Here's a site Paul O'brien简要讨论了我在说什么。他还说他从来没有看到加载时间的差异，我只是觉得我会提到它。

Answer 5

我使用稍微更改过的CSS Reset版本，完全没有问题：

/* @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 */

* {}解决方案对于快速项目来说是一个很好的解决方案。对于较大的项目，您可能希望使用实际重置，即使您在源代码中获得额外的kb。你只需要一些浏览器的一致性......

Answer 6

我几乎100％同意那篇文章。全局重置元素是混乱和缓慢的。即使使用全局*选择器也不是必需的 - 您几乎不需要将边距和填充设置为0，并且许多元素（例如div和内联元素）没有边距或填充默认情况下，在任何浏览器中。

此外，如果元素上有一些边距，则可能无关紧要。看看这个页面的标题 - 如果保证金是1.2em而不是1.1em，这是否重要？几乎不

只需为要使用的所有元素设置一个漂亮的基线。像这样：

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 */
}

......等等。你明白了。

Answer 7

在项目完成后，不要认为你可以从Eric Meyer转移到Global。

我见过很多使用全球“重置”的新手，而且那些孩子搞得一团糟，因为他们对于跨浏览器一致性需要删除哪些浏览器默认值没有基本的了解。

但我认为Eric Meyer vs. Global可能比CSS更具哲学性。有越来越多的设备在那里展示网站。黑莓，iPhone，iPad或数字标牌上的表现层看起来不一样。全球阵营的人们说网站需要看起来很好......但不完全一样。 Eric Meyer阵营的人们表示他们需要在任何可能的范围内在浏览器和设备上保持一致和良好。一个很好的目标，但耗时。这让我想起了网络的早期阶段，当时人们仍然试图使打印看起来与网络上的完全一样。我还在Eric Meyer阵营，因为它让我的生活变得轻松，而且我的代码可维护......但是同质表达层的日子即将结束。

看完这篇文章后，我想把eric meyer重置为全局重置，这是明智之举吗？

7 个答案: