html - 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>得到想要的结果。
但是我有很多 anchor ，它们的样式与以前相同，只是有一些小的变化，比如 图标在右侧而不是左侧 和不同的颜色、渐变等.。所以我决定把它分成多个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. 使用没有明确说明其值(value)的描述性名称。例如，不要使用 color_blue 作为类名，因为如果您重新设计应用程序，颜色可能会改变。最好是反射(reflect)该元素用途的名称，例如 default-action、disabled 或 emphasized。同样，with-icon 是比 icon_left 更好的类名。名称是关于语义的，而不是视觉表示。

2. 使用特定的选择器(如果适用)。例如，如果按钮类由 button 元素使用，则使用像 button.emphasized 这样的选择器。这样你就可以为其他类型的元素重用该类名(即 div.emphasized)，这样你就不必将它们重命名为 .button-emphasized 和 . block 强调。

   如果您对文档的结构了解更多，您甚至可以区分 #content > button.emphasized 和 #sidebar > button.emphasized 并使用不同的按钮类取决于元素层次结构。

3. 如果适用，使用选择器继承。如果一个类在其他不同的类中共享相同的属性值对，则应该使用继承。例如 .emphasized 适用于使用此类的所有元素的规则，button.emphasized & div.emphasized 适用于特定规则，可以覆盖更通用的(“父级”)选择器。

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