HTML / CSS最佳做法

Question

我正在将.psd图像编码为html 。 但是我对这样做的最佳实践感到困惑。 即
用于样式像按钮的achor我使用以下样式属性

.button {
padding: 10px;  
display: inline-block;
text-decoration: none;        
    background-color: #3f4551;
color: white;
    background-image: url("../images/icons/icon_left.png") no-repeat 10px center;
}

现在，我可以使用<a href="#" class="button"></a>获得所需的结果。
但是，我有很多锚，它们的样式与以前相同，只是略有变化，例如右侧的图标，而不是左侧的图标，以及不同的颜色，渐变等 。 所以我决定在多class打破它，即

.button{
    padding: 10px;

display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
  background-position: 10px center;
 }
 .color_blue{
      color:blue;
  }

现在，我可以使用这些类进行样式设置，例如<a href="#" class="button icon_left color_blue></a>"但是这样标记就变得越来越笨拙和怪异。因此，我决定询问哪种样式是最佳做法？？？ 提前致谢 ：）

Answer 1

这是一个好的开始，您的方向正确。

不过，考虑到最佳做法，还有一些其他提示：

1. 使用描述性名称 ，但不能明确说明其价值。 例如，请勿使用color_blue作为类名，因为如果重新设计应用程序，则颜色可能会更改。 反映该元素用途的名称更好，例如default-action ， disabled或emphasized 。 以相同的方式， with-icon将是比icon_left更好的类名。 名称是关于语义的，而不是视觉表示。

2. 如果适用， 请使用特定的选择器 。 例如，如果button元素使用按钮类，则使用选择器，例如button.emphasized 。 这样一来，您就可以将该类名称重用于其他类型的元素（即div.emphasized ），从而不必将它们重命名为.button-emphasized和.block-emphasized 。

   如果您进一步了解文档的结构，甚至可以区分#content > button.emphasized和#sidebar > button.emphasized并根据元素层次使用不同的按钮类。

3. 如果适用， 请使用选择器继承 。 如果一个类在其他属性之间共享相同的属性-值对，则应使用继承。 例如， .emphasized表示适用于使用此类的所有元素的规则，而button.emphasized ＆ div.emphasized表示特定规则，可以覆盖更通用的（“父”）选择器。

4. 应用命名约定 。 通常，名称是小写字母，并且最好使用减号而不是使用下划线。 因此， with-icon优于with_icon 。 您还可以像这样使用大写字母： withIcon 。 我个人更喜欢第一个版本。

Answer 2

如果我正确理解..您的正确道路！ 我知道您的源代码看起来太塞满了，但这就是它的工作方式，请记住，类用于样式多个元素，Id（如果使用正确的方式）用于设置单个实体/元素的样式