重复使用同一个类多次，但持有不同的样式是不好的做法？

Question

例如，我想在<li class="first">列表的第一个<ul>上执行某些操作。

我写了CSS：

ul .first{
    /*awesome code here*/
}

但是，我还要为我<p class="first">的第一个<div id="content">提供一个特定的CSS。

我是这样做的：

#content .first{
    /*awesome code here*/
}

如果您没有注意到，我重复使用课程first为两个完全不同的案例提供完全不同的风格。

• 以这种方式重用类是不是很糟糕？
• 这是否有可能导致故障/错误？

Answer 1

我很好，因为当你有意识地定义结构的第一项和段落的样子时。虽然，如果你使用它会更好：第一个孩子的伪选择器，然后它们将会有不同的风格，因为这就是你想要的。

我希望我不会错过这里的大图，但我也想知道在这种情况下你的代码可重用性是什么意思？

如果您打算使用ul.first，那么您必须更改

<li id="first"至<li class="first"

Answer 2

您的CSS中有错误。

如果您要将规则应用于li中的第一个ul，请假设您拥有以下HTML：

<ul>
    <li class="first">Something</li>

你的CSS应该是这样的

ul .first {
/* Some code here, notice the space above */
}

你的第二个陈述也是如此。通过撰写#content.first，您说“我的意思是一个ID为content 且的对象具有first类”。如果添加空格#content .first，则表示“我想选择一个具有first类的对象，并且该对象位于分配了content的对象中”。

但要回答你的问题，这不是不好的做法，相反 - 建议出于语义原因。

Answer 3

当您在元素之间共享样式时，您应该只使用此方法。这实际上是在CSS中使用类的原因之一。这样你就不必为不同的元素重复相同的风格。如果您尝试为同一属性应用两个不同的值，则初始值将被覆盖。

例如：

.first
{
color: blue;
color: red; 
}

第二种风格将覆盖第一种风格。此外，即使您不覆盖原始属性，仍然可能会遇到问题调试样式错误。例如，您有内联元素和块级元素，因此在这些情况下，您可能会遇到使用此方法的问题。

更新： 关于CSS类的一般声明。 ;）