HTML / CSS的最佳实践 [英] Best Practices for HTML/CSS
问题描述
我将 .psd
图片编码为 html
。但是我对这样做的最佳做法感到困惑。即
为样式 achor
就像一个按钮我使用下面的样式属性
.button {
padding:10px;
display:inline-block;
text-decoration:none;
背景颜色:#3f4551;
颜色:白色;
background-image:url(../ images / icons / icon_left.png)no-repeat 10px center;
}
现在我可以使用< a href = #class =button>< / a>
得到想要的结果。
但是我有很多与以前相同样式的锚像右侧的 图标而不是左侧 和 不同颜色,渐变等 。所以我决定把它分成多个 class
ie
.button {
padding:10px;
display:inline-block;
text-decoration:none;
背景重复:不重复;
}
.icon_left {
background-position:10px center;
}
.color_blue {
颜色:蓝色;
$ / code>
现在我可以使用这些类来设置样式,即< ; a href =#class =button icon_left color_blue>< / a>
但这样标记变得越来越笨拙和怪异。所以我决定问最好的做法是哪个?感谢提前:)
这是一个很好的开始,你正朝着正确的方向前进。 b
尽管考虑到最佳实践,还有一些提示:
-
使用描述性名称它们并没有明确地说明它们的价值。例如,不要使用
color_blue
作为类名,因为如果重新设计应用程序,颜色可能会改变。更好的是反映该元素用途的名称,例如default-action
,disabled 或
。例如,如果按钮类被强调
。以同样的方式,with-icon
会比icon_left
更好的类名称。名称是关于语义的,而不是视觉表示。 使用特定的选择器按钮
元素使用,使用诸如button.emphasized
之类的选择器。让我们为其他类型的元素(即<$ c $ c> div.emphasized )重用该类名称,以便您不必将它们重命名为.button强调
和.block-stressed
。
如果您对结构有更多了解你甚至可以区分
#content> button.emphasized
和#sidebar> button.emphasized
,并根据元素层次使用不同的按钮类。 使用选择器继承 if适用。如果一个类共享相同的属性值对,但其他属性值不同,则应该使用继承。例如
.emphasized
适用于使用此类的所有元素的规则, div.emphasized
用于特定的规则,它可以覆盖更一般的(父母)选择器。 > 应用命名约定。通常,这些名称是小写字母,而不是使用下划线,而是使用减号。因此, with-icon
优于 with_icon
。您也可以使用大写字母: withIcon
。我个人更喜欢第一个版本。
I am coding a .psd
image to html
. But i confused with the best practise to do so. i.e
for styling a achor
like a button i use following style attributes
.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;
}
now i can use the <a href="#" class="button"></a>
to get the desired result.
However i have lots of anchor which have same styling as before only with minor changes like icon on right side instead of left and different color,gradient etc.. so i decided to break it in multiple class
i.e
.button{
padding: 10px;
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
background-position: 10px center;
}
.color_blue{
color:blue;
}
now i can use these classes to style i.e <a href="#" class="button icon_left color_blue></a>"
But in this way the markup is getting more and more clumsy and weird.So i decided to ask for which is the best practice ??? THANKS in Advance :)
That's a good start and you are going in the right direction.
Some further hints though, considering best practice:
Use descriptive names which are not explicitly telling their value. For example, do not use
color_blue
as class name because the color could change if you redesign your application. Better are names that reflect the purpose of that element, likedefault-action
,disabled
oremphasized
. In the same manner,with-icon
would be a better class name thanicon_left
. Names are about semantics, and not the visual representation.Use specific selectors if applicable. For example, if the button classes are used by
button
elements use selectors likebutton.emphasized
. That let's you reuse that class name for other types of elements (i.e.div.emphasized
), so that you do not have to rename them into.button-emphasized
and.block-emphasized
.If you know more about the structure of your document, you could even distinguish between
#content > button.emphasized
and#sidebar > button.emphasized
and use different button classes depending on the element hierarchy.Use selector inheritance if applicable. If a class shares the same property-value pairs amongst others that differ, you should use inheritance. For example
.emphasized
for rules that apply to all elements using this class, andbutton.emphasized
&div.emphasized
for specific rules, which can overwrite the more general ("parent") selector.Apply naming conventions. Usually, the names are lowercase and the minus sign is prefered instead of using the underscore. Therefore,
with-icon
is better thanwith_icon
. You can also use uppercase letters like so:withIcon
. Personally i prefer the first version.
这篇关于HTML / CSS的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!