需要遵循CSS选择符命名的四个原则

坦率的说，我写CSS时，有至少1/4的时间是在纠结选择符该如何命名。随意的命名，会让你陷入尴尬。 
　　举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red { color: orange; }么？要不然就是把HTML里的每个class="red"改成class="orange"？ 
　　在过去几年时间里，我经常遇到这样的尴尬。因此作为一些经验之谈，我整理出以下的几个命名原则： 
　　 原则一：CSS选择符命名应该体现结构而不是样式。  
　　这句话听起来很奇怪。这样不是违反了结构和样式分离的原则么？恰恰相反，其实正是遵循分离原则。要知道，CSS选择符名真正的用处是在HTML代码里修饰标签。所以它其实应该被看作结构的一部分。因此选择符的名字不可以跟样式有关。 
　　我开头将的那个例子，就是违反这一原则典型。正确的写法，应该是.highlight { color: red; }，或者索性就用em { color: red; font-style:normal; }。 
　　同理，我尽量避免用带有left、right、颜色、bold等字眼的名字，总而言之，那些可以被作为CSS属性值的名字，都尽量少用作名字。 
　　有时候，我们会遇到另一种情况。有一个很常见的布局：标题放在区块的左上方，而右上方是一个“查看更多”的链接。所以我们会用这样的代码 
Example Source Code [www.52css.com] 
<h2> 
     <span><a href="#">查看更多</a></span> 
     精彩贴图 
</h2> 
　　自然，会有相应的样式： 
　　h2 span {float:right;} 
　　但是这样做其实很危险。如果我们要求给标题后再加一个副标题（比如“超过1000万精美图片”之类的恶俗标语），就没法再用span了。用strong或是em，其实感觉怪怪的。 
　　 原则二：不要轻易将特殊样式直接赋给常用的HTML标签  
　　上面那个例子的问题就在于，轻易的将样式应用在span这种常用的标签上了。h2 span这种选择符，意味着你认为h2里所有的span都要使用右浮动。但是这样的判断显然是很武断的。 
　　另一个例子是，喜欢用ul.top10 li这种选择符。这样用并非不可，但请先确保这个排行榜里只是纯文字。倘若有一天产品经理发现，似乎应该把前三个的信息写得更详细，就意味着你可能需要用到下面这种结构： 
Example Source Code [www.52css.com] 
<ul class="top"> 
     <li> 
         <div class="product"> 
             <h6>产品名称</h6> 
             <ul> 
                   <li>型号：XXX</li> 
                   ... 
             </ul> 
         <div> 
     </li> 
</ul> 
　　这下又傻眼了吧。只能用.top20 .product li {}去覆盖掉之前的样式。 
　　我比较倾向的写法，是如 ul.top20 li.item这样写。（当然，CSS2准备了更多更精准的后代选择器，就犯不着这个了。等待IE8吧~~） 
　　 原则三：设计好一系列的“全局保留字”，以避免命名冲突  
　　一些常用的单词，就不要用作特殊样式的名字。比如，我们会经常用到如下的选择符： 
Example Source Code [www.52css.com] 
　　.tab li.current 
　　或者 
　　.nav li.current 
　　以表示当前激活的标签或选项。很多样式都会用到“current”这个单词，为了避免彼此的样式冲突，有一个很简单的办法，就是人为商定，单纯的.current样式不作任何定义。换句话说，current这个名字只能出现在精确的后代选择符中。 
　　类似的还有： 
Example Source Code [www.52css.com] 
　　“.active”：和current差不多，有人也喜欢用这个 
　　“.first”：经常在如“ 选项 | 选项 | 选项”的结构中用到 
　　“.last”：在田字格布局中可能会用到 
　　“.hover”：有时候需要用这个样式结合JS实现一些效果 
　　“.text”、“.button”、“.submit”等：在属性选择器普及前，input标签的样式都靠它们了。 
　　 原则四：英文要正确  
　　哎，这只能怪计算机是美国人发明的了。有时候会看到一些奇怪的选择符名。我解释一些常用单词的含义： 
　　header，footer： 
　　这两个的意思是指“头部”和“底部”，更确切点讲是“页头”和“页尾”。 
　　heading，footing： 
　　heading的意思是“标题、题目”，<h1>的h就是heading的缩写。 
　　footing的意思是“注脚”。 
　　所以呢，我的看法是，整个页面的顶部和底部用header和footer，而区块的标题和底部用heading和footing。 
　　caption： 
　　这个词的意思也是“标题”，但是它特指“图片的文字说明”。所以记得用在图片底部的文字。 
　　primary，secondary： 
　　这两个词是“首要”“次要”。它们往往是指同级别的事物，只是重要性不同。比如提交按钮和取消按钮。 
　　main，sub： 
　　这两个词才是上下级关系。如“主菜单”和“子菜单”。 
　　top，middle，bottom： 
　　这里主要是“中”这个词。“上中下”里的“中”是用middle。参见text-align属性。 
　　left，center，right： 
　　“左中右”的“中”是center。参见vertical-align。 
　　此外，还有一些常用的词语： 
　　rating：打分 
　　rank：“第几位” 
　　showcase：展示橱窗，可以用作一行五个这种排布。 
　　category：分类 
　　thumbnail：缩略图 
　　snapshot：截图。这个单词的意思是“快照”，所以一般指原大小。 
　　breadcrumbs、pathway：这两个都可以用来指这个东西：“首页 > 二级页面 > 内容页” 
　　quicklinks：这个可以用作页面右上角的“ 登录 | 帮助 | 客服 ”，也可以指页面底部的“ 关于我们 | 网站地图 ” 
　　tip：提示。可以用作输入框旁边的文字，或是弹出的提示框。