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

这是一个良好的开端，你正朝着正确的方向前进。

考虑到最佳实践，还有一些进一步的提示：

使用描述性名称，这些名称未明确告知其值。例如，不要将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＆amp; div.emphasized用于特定规则，可以覆盖更一般的（“父”）选择器。
应用命名约定。通常，名称是小写的，而减号则是首选，而不是使用下划线。因此，with-icon优于with_icon。您也可以使用大写字母：withIcon。我个人更喜欢第一个版本。

Answer 2

如果我理解正确..你走在正确的道路上！我知道它看起来像你的源代码太过塞了但是它的工作方式。记住这些类用于样式化多个元素，并且Id（如果以正确的方式使用）用于设置单个实体/元素的样式< / p>

HTML / CSS的最佳实践

2 个答案: