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我决定寻求其是最好的做法？感谢提前:)

来源

2012-03-15 Vivek

按钮的最佳做法是使用按钮，而不是链接。 – 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

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

一些进一步的线索不过，考虑的最佳实践：

使用描述性的名称没有明确告诉他们的价值。例如，不要使用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。我个人更喜欢第一个版本。

来源

2012-03-15 09:50:40 Alp

感谢您的时间来回答这个问题。但有时候我真的被命名约定卡住了。例如C＃说要用大写字母命名方法名称，html表示使用减号（ - ）。 – Vivek 2012-03-15 17:02:47

每种语言都有其自己的命名约定。没有普遍有效的惯例。如果您从一种语言切换到另一种语言，可能会很不方便。 – Alp 2012-03-15 18:59:21

它可能听起来不专业，但我可以问你，如果我可以使用我的选择相同的命名约定，我经常使用的所有语言lyk C＃，SQL，Java最后但并非最不重要的HTML/CSS – Vivek 2012-03-15 19:13:46

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

来源

2012-03-15 09:31:05 luca

HTML/CSS的最佳实践

回答

相关问题