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"这些命名方式。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。