HTML / CSS的最佳实践

本文介绍了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 适用于使用此类的所有元素的规则， button.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, like default-action, disabled or emphasized. In the same manner, with-icon would be a better class name than icon_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 like button.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, and button.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 than with_icon. You can also use uppercase letters like so: withIcon. Personally i prefer the first version.

这篇关于HTML / CSS的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！