Mar
04
我们经常会为了达到某一共有的表现，定义一个通用的样式，比如<例1>
例1：
假设我们规定了用红色代表警告，于是定义
.red{color:#f00;}
表示红色前景色，在需要用到这个表现的时候我们就可以给相应元素添加这个 class.
<div class="red">红色字体</div>
这样做的好处是灵活、通用、而且省了很多麻烦。不过我们是否能够想到它的坏处是什么呢，想想 W3C 为什么不建议使用 <font>、<i>和 <b>标签吧;因为他们是纯表现的标签，没有任何语义。在看这个加上.red的 div，是否觉得它没有任何语义呢（除了知道这个 DIV 的前景色是红色，其他我们一无所知）！这么做其实等于我们自己创造了一个毫无语义的 <c> 或 <d> 标签。
我有很长一段时间都在考虑如何把 <例1> 这种类型的命名设计的更规范一些，我的建议是把上面的 .red 换成 .alert 这种语义化而非表现的单词，代表警告。我们都知道重构的目的是要把表现和结构完美分离，所以我们强加给 HTML 元素的 CLASS 或者 ID 也要做到结构和表现分离，让人一看到就能明白 HTML 标签描述的含义，不仅可以减少页面中的冗余样式，也有利于后期改版。
以下是命名的一些总结（建议）：
- 不要在命名中出现具体的颜色名称，最好用相应的喻义取而代之。
- 不要在命名中使用方位单词，如 right、left。
- 不要在命名中使用具体表现，比如 bold、float等无意义的命名。
- 尽量在样式表中去描述具体表现，而在HTML表述具体结构，对比下面的两段代码，孰好孰次明眼人一看就能看出来。
A.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.content{width:510px;border:10px solid #888;}
.right-grid{width:400px;background:#f1f1f1;}
.left-grid{width:100px;background:#ddd;}
.floatright{float:right;}
.floatleft{float:left;}
.clearfix:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix{zoom:1;}
</style>
</head>
<div class="content clearfix"> <div class="left-grid floatleft"> abcd test
</div> <div class="right-grid floatright"> <div class="main-ct clearfix"> <div class="nav floatleft"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> </div> </div></div>
B:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.content{width:510px;border:10px solid #888;}
.main-grid{width:400px;background:#f1f1f1;float:right}
.sub-grid{width:100px;background:#ddd;}
.sub-grid,.nav{float:left;}
.content:after,.main-ct:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.content,.main-ct{zoom:1;}
</style>
</head>
<div class="content"> <div class="sub-grid"> abcd test
</div> <div class="main-grid"> <div class="main-ct"> <div class="nav"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> </div> </div></div>
事实证明写好HTML结构是需要花费一番苦工的，这就是我进入淘宝一周之后的体会o(∩_∩)o…！
工作了总会有点收获，我也等不及了！！
赞同！
进淘宝啦，不错不错！我现在的方向也是前端开发！
其实css取名这个问题我想过好多次，在面对是用语义还是用表现的过程中不断的反复。一直思考几个问题
1.不用表现命名也是造成css文件变大的一个原因
2.表现和样式分离，那样是表的本来功能是样式还是语义呢？如果id是语义，class是样式，是不是应该让id负责语义，class名负责表现呢？
3.如果说我们的class要语义，那么css框架的发展前途就让人担忧了。
其实我很同意class命名要分离表现，我也是一直这么做的，可是类似于上面的几个问题一直在心里是个闹心的东西。你说呢？也许一个折中的契合点很重要
CSS命名，是每次写结构时，必须面对的问题，呵呵，“不要在命名中使用方位单词，如 right、left”，在一些组合样式中，会使用到一些公用方位，比如浮动居左，命名为.le，这是否也不太好呢？但使用中，有时会比较方便。–请教