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

Question

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

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

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

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

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

Answer 1

在你给出的情况下，我肯定会继续使用包含选择器。标记中的虚假类越少越容易维护，并且规则 \xe2\x80\x98.main p\xe2\x80\x99 清楚地说明了它的作用。使用您的判断来判断更复杂的情况是否仍然清晰。

\n\n

请注意， \xe2\x80\x98.main p\xe2\x80\x99 选择所有后代段落，而不仅仅是直接子段落，这可能是也可能不是您想要的；意外嵌套的后代匹配是错误的潜在来源（特别是对于相对字体大小等累积属性）。如果您只想选择子项，则需要 \xe2\x80\x98.main>p\xe2\x80\x99，不幸的是，它在 IE6 中不起作用。

\n\n

这是许多网站对类名着迷的原因之一：更多涉及的选择器本来可以用来挑选没有类名的元素，但在 IE 中往往不起作用。

\n