CSS模块化(七) CSS的命名

7. CSS的命名

7.1 基本命名

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

 

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：new

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

7.2命名风格

首先，CSS的命名推荐使用英语，不要使用汉语拼音。

两种常见的命名法：

骆驼命名法：从笫二个单词开始，将每个单词的首字母大写，例如dropMenu、subNavMenu；

划线命名法：将每个单词用中划线“-”或下划线“_”分隔，例如drop-menu、sub_nav_menu。

为了实现css的模块化，推荐使用两种命名法结合的方法命名。

7.3 命名方案实例解析：

命名方案一：

<style type="text/CSS">

.timeList{xxxxxxx}

</style>

<ul class="timeList">

 <li>2009年08月(3)</li>

 <li>2009年07月(12)</li>

 <li>2009年06月(3)</li>

 <li>2009年05月(8)</li>

 <li>2009年04月(2)</li>

 <li>2009年03月(8)</li> </ul>

疑问：假如每个li都有一条下划线，但最后一个没有，因为IE6不支持:last伪类，所以我们不能简单地使用.timeList li{border-bottom:×××}和.timeList li:last{border-bottom:none;)来实现样式。怎么办？

命名方案二：

<style type="text/CSS">

.timeList{xxxxxxx}

.timeList li{border-bottom:xxxx;}

.timeList .last{border-bottom:none;}

</style>

<ul class="timeList">

 <li>2009年08月(3) </li>

 <li>2009年07月(12) </li>

 <li>2009年06月(3)</li>

 <li>2009年05月(8)</li>

 <li>2009年04月(2)</li>

 <li class="last">2009年03月(8)</li> </ul>

疑问：一个项目是由多人合作而各个工程师的风格不同，last是个过于简单且常用的命名，如果工程师A过于依赖子选择符，可能使CSS代码里出现大量类似于“.timeList .last”、“.namcList .last”、“.ageList .last"这样的选择符，如果多人合作，工程师B可能习惯直接使用“.last”作为选择符，从而和“.timeList .last”等选择符设置的样式层叠，产生意料之外的影响。这不就涉及一个问题—滥用子选择符了吗？怎么办？

命名方案三：

<style type="text/CSS" >

.timeList { xxxxxxx }

.timeList li|border-bottom:xxxx; }

.timeListLastItem{border-bottom: none; }

</style>

<ul class="timeList">

    <li>2009年 08月 (3)</li>

    <li>2009年 07月 (12)</li>

    <li>2009年 06月 (3)</li>

    <li>2009年 05月 (8)</li>

    <li>2009年 04月 (2)</li>

    <li class="timeListLastItem">2009年 03月 (8)</li> </ul>

疑问：虽然CSS没有真正意义上的“封装”功能，但如果CSS命名能够表现出从属关系，就可以相对地让模块的封装性更好。使用“.timeListLastltem”代替“.timeList .last”来作为选择符，降低了冲突隐患，但命名上怎么看出从属关系？

解决方案：如前所述，我们可以结合骆驼命名法和划线命名法来进行命名，其中骆驼命名法用于区别不同单词，划线用于表明从属关系。“.timeListLastltem”可以改进为“.timeList-lastItem"，如此一来，进一步提高了CSS命名的可读性，不仅能从命名中清楚看出各个单词，还能了解到从属关系。很明显，“.timeList-lastItem"是“.timeList"的“.lastItem”.

既然划线用于表明从属关系，那么不推荐使用诸如“.timeListLastItem"、“.time-list- first-item"这些命名方式。