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的命名推荐使用英语,不要使用汉语拼音。

两种常见的命名法:

骆驼命名法:从笫二个单词开始,将每个单词的首字母大写,例如dropMenusubNavMenu

划线命名法:将每个单词用中划线“-”或下划线“_”分隔,例如drop-menusub_nav_menu

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

7.3 命名方案实例解析:

命名方案一:

<style type="text/CSS">

.timeList{xxxxxxx}

</style>

<ul class="timeList">

 <li>200908(3)</li>

 <li>200907(12)</li>

 <li>200906(3)</li>

 <li>200905(8)</li>

 <li>200904(2)</li>

 <li>200903(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>200908(3) </li>

 <li>200907(12) </li>

 <li>200906(3)</li>

 <li>200905(8)</li>

 <li>200904(2)</li>

 <li class="last">200903(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"这些命名方式。

展开阅读全文

没有更多推荐了,返回首页