泛型和特定元素样式-用于可维护性

Question

考虑以下三种情况..。

场景A

@import "reset.css";
/* ... */
p {margin:1em 0;}
/* ... */
p#copyright {margin:0; padding:10px;}

在场景A中，一个泛型规则应用于所有给出顶部和底部边距的<p>元素，以便在HTML中使用时，段落的间距是正确的。但是，这样做会导致<p>元素现在需要为装饰目的删除其通用边距的情况，例如文档底部的版权必须没有边距。

场景B

@import "reset.css";
/* ... */
div.content_body p,
div.sidebar_body p {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

在场景B中，假设<p>元素不需要顶部和底部边距，除非显式定义。在这里，内容和边栏元素将需要间隔良好的段落。

场景C

@import "reset.css";
/* ... */
p.spaced {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

在场景C中，只有具有类<p>的spaced元素才能应用顶部和底部边距。

问题：

哪一种方案更适合使用，更重要的是为什么？每一种情况对以下情况有什么影响：

performance

• CSS
• 浏览器CSS重量与UI缺陷

的扩展

如果您必须添加一个需要流畅段落的新小部件，那么哪种场景更适合您？

谢谢!

Answer 1

我试图遵循这样的原则，即朴素的选择器(比如"p“本身)应该提供合理的缺省值，然后使用更具体的选择器来覆盖这些默认值。我认为最好用场景A和B来表示。

如果标记很简单，并且存在一个很好的全局默认设置，那么我的样式表看起来就像场景A。

如果标记不那么简单，或者很难定义全局默认值，那么我的样式表看起来更像场景B。

如果可能的话，我尝试避免场景C()。我希望这是超级容易，我(或其他人)添加新的内容6个月后。我发现：

1. 中的专门性类越少，就越容易“陷入成功的深渊”，因为您编写的最简单的东西(<p>Whatever</p>)将只起作用。presentational的类越专业，您就越有可能练习复制/粘贴编程以保持一致的标记使用。当类是语义时，
2. CSS工作得更好，并且描述内容的内容是什么，并描述内容应该如何显示。场景C是表示样式的一个示例，它仅略优于内联样式。

Answer 2

泛型的第一，因为它更好地允许所有的第一，然后阻止功能后。:)

Answer 3

这完全取决于你的网站的设计。

如果站点上的大多数段落都应该有页边距，但是有几个段落没有，那么A中的方法需要最少的代码，因此可能会降低CSS的重量和更好的可维护性。

但是，如果只有内容和边栏中的段落需要页边距(或者没有太多的外部段落需要)，那么B中的方法是一个更好的主意。

至于C中的方法，我主要担心的是如何生成站点的HTML。如果它是由后端系统生成的，那么该系统必须知道哪些段落应该间隔，哪些段落不应该，这对于系统或其用户来说是额外的复杂性。

对于段落的具体例子，我常常以B这样的东西结束，很容易假设段落应该有一些漂亮的、体面的样式，这样就可以让文章读得很好。但是如果你看看大多数现代网站，页面上的大部分内容都不是这样的:菜单、侧边栏和特殊的小东西。现在，这可能不是很好，就设计而言，但是如果您要实现这样的设计，B是用更少的代码来实现的方法，而更少的代码通常意味着更低的重量、更容易维护和更少的缺陷。