Question

作为一个CSS新手，我想知道专业人士是否建议重复特定的样式属性，而不是每个相关选择器的继承但默认属性？例如，我应该使用

body {background:transparent none no-repeat; border:0 none transparent; margin:0; padding:0;}
img {background:transparent none no-repeat; border:0 none transparent; margin:0; outline:transparent none 0; padding:0;}
div#someID {background:transparent none no-repeat; border:0 none; margin:0 auto; padding:0; text-align:left; width:720px; ...}

或

body {background:transparent; border:0; margin:0; padding:0;}
img {background:transparent; border:0; margin:0; outline:0; padding:0;}
div#someID {background:transparent; border:0; margin:0 auto; padding:0; text-align:left; width:720px; ...}

或者我真正需要的是什么（我认为）

body {background:transparent; margin:0; padding:0;}
img {border:0; outline:0;}
div#someID {margin:0 auto; width:720px; ...}

如果最好的做法是使用第一个或第二个，你对定义类的想法是什么

.foo {background:transparent; border:0; margin:0; padding:0;}

然后将其应用于每个相关的选择器：

<div id="someID" class="foo">...</div>

是的，现在我完全糊涂了......所以请指教！谢谢！

Answer 1

编写CSS的目的应该是样式表的可读性和可维护性。通常这意味着编写尽可能少的规则，通过使用尽可能多的快捷方式帮助实现目标，并利用CSS初始值和可靠的浏览器样式表默认值。

（有时候你可能想稍微复制一下规则，因为你有两个部分想要按照巧合的方式设置样式，并且你想将这些样式分成样式表的不同部分，这样你就可以管理小组中的规则集。）

并非所有浏览器样式表默认值都是可靠的，这就是人们使用CSS重置的原因。（虽然我个人认为他们中的大多数都太重量级和侵入性。大多数现代浏览器都同意重要的东西，只需要一些提示来解决特定的痛点。设置十几个规则的开销如margin: 0 on 文档中的每个元素似乎都在顶部。）

您的示例中的许多属性无论如何都是初始和/或默认样式表值，因此您不必通过包含它们获得任何收益。（border-width: 0在技术上不是初始值，但是从border-style: none开始，你就不会注意到差异了。）你的规则将更容易处理最低限度的写作：

body { margin: 0; }
#someID { width: 720px; margin: 0 auto; }

您如何定义像
这样的类？

.foo {background:transparent; border:0; margin:0; padding:0;}

嗯，这取决于foo是什么。如果页面上有许多代表相同内容的元素，您应该使用class标记它们，并以相同的方式对它们进行整理。

但是如果你只想将一些样式应用于一堆不相关的元素，你应该单独定位它们（在选择器中使用,）。不要通过添加class="red_thing big_border"等虚假类来污染带有样式问题的内容标记。

然而就目前而言，这些规则与包括<div>在内的大多数元素的默认值相同，.foo无论如何都是无用的。

Answer 2

现在使用所谓的“CSS重置”是很常见的事情。基本上它只是你在声明顶部查看的一堆CSS，它将所有样式重置为一个共同的基础。这个想法是为了平衡不同浏览器的默认样式之间的差异。从那里，您可以更加确定您将从CSS获得您想要的东西。其中一个比较受欢迎的是Eric Meyer's CSS Reset。

Answer 3

始终使用：

border:0;

在：

border:0 none transparent;

如果你想一想，如果边框的宽度是0（即没有），那么它有什么用途来指定边框的样式和颜色，因为甚至不会显示边框。（这同样适用于背景和其他属性）

而且，我会选择

.foo {background:transparent; border:0; margin:0; padding:0;}

最好将CSS样式应用于具有“foo”类的所有元素，而不是为“someID”，“someID2”，“someID3”等重复相同的CSS代码。

它会节省带宽（因为你的CSS文件会更小），也意味着你必须做更少的工作，这总是一个奖励。

最佳实践：如何正确使用（重复）CSS样式属性？

3 个答案: