命名CSS类（id命名类同 ）

尽管命名CSS类的问题经常会被忽略，但这绝不等于它不重要。良好的命名能够有效提高CSS样式的编写速度，有利于CSS样式结构的组织。

常用的命名法

Web前端开发讲求灵活和创意，采用何种命名法完全取决于个人习惯、团队要求或者项目需求。目前常用的命名法无外乎CAMEL命名法和符号连接命名法。

（1）CAMEL命名法¹

CAMEL命名法也被称为骆驼命名法、驼峰命名法，个人觉得驼峰这个名字很贴切。CAMEL命名法的特点是混合使用大小写字母来构成类名。程序清单1给出了CAMEL命名法。

程序清单1 采用CAMEL命名法的代码

<div class="wrapper">

<div class="leftContent">

<div class="title">

<div class="top">我是标题的顶部</div>

</div>

</div>

</div>

（2）符号连接命名法

最具代表性的两种符号连接命名法是下划线（_）命名法和连字符（-）命名法，它们分别使用下划线（_）和连字符（-）来分隔类名中出现的关键词（left_content或left-content）。

很难说CAMEL命名法和符号连接命名法哪个更好，抉择取决于个人意识，有一种看法认为符号连接命名法的好处在于不用按“Shift”键，进而达到避免拼写错误的目的。

语义化命名法

常用的CSS命名法从直观显示的角度进行命名，而语义化命名法则是从另一个角度来对CSS类进行命名即将语义部分包含在CSS类命名中，这类似于程序开发中的匈牙利命名法。

实践过程中存在很多种语义化命名方法，这里介绍一下MySpace中国（聚友） UI Team所使用的语义化命名法：利用祖先容器类名中关键词的首字母组合作为当前类名的前缀。程序清单1所示的代码很好地诠释了其规则。

程序清单2 语义化命名法的示例代码

<div class="squirrelWrapper">

<div class="swLeftContent ">

<div class="swlcTitle">

<div class="swlctTop">我是标题的上部</div>

</div>

</div>

</div>

在程序清单1中，类名squirrelWrapper包含两个关键词squirrel和Wrapper，它们的首字母组合sw形成了swLeftContent类中的前缀部分，余下的部分依此类推。

调头回来对比程序清单1和程序清单2，我们会发现程序清单2的优点显而易见：

（1）降低了样式覆盖的概率

为了避免样式覆盖，开发者可能会使用与.wrapper .left .title .top相似的层级关系来实现程序清单2中top类，而大多数情况下，开发者直接实现.swltTop。

（2）包含语义

通过观察CSS类名可以清晰地读出CSS类的层级关系。

注意：再强调一下，命名法之间没有绝对优劣，强烈建议你花些时间找出最适合自己的命名法。此外，CSS类的命名同样适用于id的命名。

1 严格地说，CAMEL命名法要求第一个字母小写，如果第一个字母大写则为帕斯卡命名法