html - HTML/CSS最佳做法

我正在将.psd图像编码为html。但我对这样做的最佳做法感到困惑。即
对于像按钮一样设置aachor的样式，我使用以下样式属性

.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>来获得所需的结果。
不过，我有很多锚，有相同的样式，只有轻微的变化，如图标在右侧，而不是左侧和不同的颜色，梯度等。。所以我决定把它分成几个部分

.button{
    padding: 10px;

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

现在我可以使用这些类设置样式，即class
但是这样的话，标记就变得越来越笨拙和怪异了，所以我决定问一下哪种做法是最好的？?? 提前谢谢：）

最佳答案

这是一个好的开始，你正朝着正确的方向前进。
不过，考虑到最佳实践，还有一些进一步的提示：
使用没有明确说明其值的描述性名称。例如，不要使用color_blue作为类名，因为如果重新设计应用程序，颜色可能会更改。最好是反映元素用途的名称，如default-action、disabled或emphasized。以同样的方式，with-icon将是比icon_left更好的类名。名字是关于语义的，而不是视觉表现。
如果适用，请使用特定的选择器。例如，如果按钮类由button元素使用，则使用类似button.emphasized的选择器。这样，您就可以对其他类型的元素（即div.emphasized）重用该类名，这样就不必将它们重命名为.button-emphasized和.block-emphasized。
如果您更了解文档的结构，甚至可以区分#content > button.emphasized和#sidebar > button.emphasized并根据元素层次结构使用不同的按钮类。
如果适用，请使用选择器继承。如果类在其他不同的类中共享相同的属性-值对，则应使用继承。例如.emphasized用于应用于使用该类的所有元素的规则，而button.emphasized&div.emphasized用于可以覆盖更通用（“父”）选择器的特定规则。
应用命名约定。通常，名称是小写的，减号是首选的，而不是使用下划线。因此，with-icon优于with_icon。您也可以使用大写字母，如so:withIcon。我个人更喜欢第一个版本。

关于html - HTML/CSS最佳做法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9716943/