CSS最佳实践：父类的所有元素或样式的类？

Question

所以，我想知道以下内容：我有一些主要内容div和侧边栏div，CSS看起来如下：

.main{
 width: 400px;
 height: 300px 
}
.sidebar{
 width: 100px;
 height: 300px;
}

我现在不会包含所有浮动属性，因为我只对以下内容感兴趣： 如果我在它们中都有一个p元素并且我希望它们具有不同的样式，我应该给段落不同的类别，还是我要为它们定义样式：

.main p{
 color: blue;
 text-align: right;
 font-family: ...
}

然后对于.sidebar p我会定义别的东西...... 另一种方法是定义一个类p.myclass并在那里定义样式。 我试图了解更好的做法是什么。显然，如果我使用第一种方法在其中一个元素中有30个p元素，我需要更少的标记，因为我必须给它们所有类。另一方面，我创建了CSS，我只能“使用”那个父元素，而不是一般的定义，我可以在网站的更多地方应用... 我注意到在很多“大”网站中，几乎每个单独的html元素都有自己的类...... 有什么想法吗？

Answer 1

在你给出的情况下，我肯定会继续使用收容选择器。标记中较少的虚假类更容易维护，规则“.main p”清楚地说明它的作用。判断更复杂的案件是否仍然清晰，请判断。

请注意，'。main p'选择所有后代段落而不仅仅是直接子段，这可能是您想要的，也可能不是您想要的;意外嵌套的后代匹配是潜在的错误来源（特别是对于相对字体大小等累积属性）。如果您只想选择孩子，则需要'.main＆gt; p'，但遗憾的是在IE6中不起作用。

这就是为什么许多网站都对类名疯狂的一个原因：更多涉及的选择器可以用来挑选没有类名的元素，但往往不能在IE中工作。

Answer 2

我投票赞成.main p和.sidebar p因为：

• 当你用英语表达时，它最清楚地表达了你的意图
• 它减少了HTML中所需的显式类的数量
• 如果您稍后改变主意并想要一个具有该样式的明确段落类，您只需添加它：.main p, p.foo

Answer 3

在我看来，使用嵌套选择器[父子关系]将更难以阅读和维护。

Evdn如果设计频繁更改，CSS应该受此影响较小。因此，在可维护性的情况下，样式单个元素将更容易。

如果元素将存在于可预测的位置，那么您可以根据父元素设置它。

Answer 4

在每个单独元素上按类设置样式的主要缺点是膨胀：如果您有许多这些元素，CSS属性将成为传输字节的显着百分比。特别是对于大型文档，在下载中保存几KB可以算一算。使用AJAX请求或IE解析innerHTML的速度非常慢。