HTML/CSS的最佳实践
我正在编码.psd
图像到html
。但是我对这样做的最佳做法感到困惑。即
的造型一achor
就像一个按钮,我用下面的样式属性HTML/CSS的最佳实践
.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>"
但这种方式标记被越来越笨拙weird.So我决定寻求其是最好的做法?感谢提前:)
这是一个好的开始,你正朝着正确的方向前进。
一些进一步的线索不过,考虑的最佳实践:
使用描述性的名称没有明确告诉他们的价值。例如,不要使用
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
。您也可以使用如下所示的大写字母:withIcon
。我个人更喜欢第一个版本。
如果我理解正确..你在正确的道路上!我知道它看起来像你的源代码太充塞,但它的工作方式。请记住,类用于多个元素的样式,并且Id(如果以正确方式使用)用于样式化单个实体/元素
按钮的最佳做法是使用按钮,而不是链接。 – 2012-03-15 09:26:19
@Truth:你为什么这么说?他们*是*链接。这是CSS的重点,UI决定是另一个话题。 – 2012-03-15 09:27:21
“.psd image to html”是什么意思,以及如何解决这个问题? – 2012-03-15 09:27:45