CSS中最合理ID/CLASS的命名规范

先看一个例子:
.l-123f { color: red; }
  如果你第一次看到这个类名,你能在css文件立刻找到这个class吗?估计很难,因为这个类的名称只是某一个人能理解的符号再没有其他意义,所以这里没有一个准确的方法能够让你立即说出来。

让我们来看下这个类名定义:

.right-red { color:red; }

  你可能很明确的知道这个class选择符的所起的作用。但是这里还有个问题,当你在一星期的时间需要重新设计。在重新设计的时候,这个模块被放置到了左边,而且还是绿色。这个类就不再有存在的价值。所以现在不得不选择,要么改变所有的属性值,要么放着它不动,这可能导致混乱。
  最好不要在你的类名或者ID名中去加入颜色或者长宽的尺寸等带有属性的名字。你应该避免任何的属性值都是直接的词汇。(如box)直接属性可能会导致内容的分离。

让我们来看看最合理ID/CLASS的命名规范:

.product-description { color: red; }

  用这种样式定义的product-description(产品描述),不管你怎么改变,她都是那么的干净清晰。

总结为:最好不要在你的类名或者ID名中去加入颜色或者长宽的尺寸等带有属性的名字。

参看文章:http://www.51xuediannao.com/html+css/htmlcssjq/CSS_name.html?

如果您觉得此文章对你帮助很大,不妨打赏下!
comments powered by Disqus