坦率的说，我写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属性值的名字，都尽量少用作名字。
　　有时候，我们会遇到另一种情况。有一个很常见的规划：标题放在区块的左上方，而右上方是一个“查看更多”的链接。所以我们会用这样的代码

<h2>
    <span><a href="#">查看更多</a></span>
    精彩贴图
</h2>

　　自然，会有相应的款式：

　　h2 span {float:right;}

　　但是这样做其实很危险。如果我们要求给标题后再加一个副标题（比如“超过1000万精美图片”之类的恶俗标语），就没法再用span了。用strong或是em，其实感觉怪怪的。

　　准绳二：不要轻易将特殊款式直接赋给常用的HTML标签

　　上面那个例子的问题就在于，轻易的将款式使用在span这种常用的标签上了。h2 span这种选择符，意味着你认为h2里所有的span都要使用右浮动。但是这样的判断显然是很武断的。

　　另一个例子是，喜欢用ul.top10 li这种选择符。这样用并非不可，但请先确保这个排行榜里只是纯文字。倘若有一天产品经理发现，似乎应该把前三个的信息写得更详细，就意味着你可能需求用到下面这种结构：

<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吧~~）

　　准绳三：设计好一系列的“全局保留字”，以避免命名冲突

　　一些常用的单词，就不要用作特殊款式的名字。比如，我们会经常用到如下的选择符：

　　.tab li.current
　　或者
　　.nav li.current