日期:2014-05-16  浏览次数:20610 次

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">