微信图片_20180918093805.jpg

ClassName命名

ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接

命名原则

基于姓氏命名法(继承 + 外来),如下图:

enter image description here

祖先模块不能出现下划线,除了是全站公用模块,如 mod_ 系列的命名:

推荐:

<div class="modulename">
    <div class="modulename_info">
    <div class="modulename_son"></div>
    <div class="modulename_son"></div>
    ...
    </div>
</div>
    
<!-- 这个是全站公用模块,祖先模块允许直接出现下划线 -->
<div class="mod_info">
    <div class="mod_info_son"></div>
    <div class="mod_info_son"></div>
    ...        
</div>

不推荐:

<div class="modulename_info">
    <div class="modulename_info_son"></div>
    <div class="modulename_info_son"></div>
    ...        
</div>    

在子孙模块数量可预测的情况下,严格继承祖先模块的命名前缀

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info"></div>
</div>

当子孙模块超过4级或以上的时候,可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块

推荐:

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
       <div class="modulename_info_user">
        <div class="modulename_info_user_img">
                <img src="" alt="">
                <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

不推荐:

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <div class="modulename_info_user_img_tit"></div>
                <div class="modulename_info_user_img_txt"></div>
               ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

模块命名

全站公共模块:以 mod_ 开头

<div class="mod_yours"></div>

业务公共模块:以 业务名_mod_ 开头

<div class="paipai_mod_yours"></div>

常用命名推荐

注意:ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截插件等)会直接过滤这些类名,因此

<div class="ad"></div>

这种广告的英文或拼音类名不应该出现

另外,敏感不和谐字眼也不应该出现,如:

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div> 
<div class="ass"></div> 
<div class="KMT"></div> 
...
~ClassName含义
1about关于
2account账户
3arrow箭头图标
4article文章
5aside边栏
6audio音频
7avatar头像
8bg,background背景
9bar栏(工具类)
10branding品牌化
11crumb,breadcrumbs面包屑
12btn,button按钮
13caption标题,说明
14category分类
15chart图表
16clearfix清除浮动
17close关闭
18col,column
19comment评论
20community社区
21container容器
22content内容
23copyright版权
24current当前态,选中态
25default默认
26description描述
27details细节
28disabled不可用
29entry文章,博文
30error错误
31even偶数,常用于多行列表或表格中
32fail失败(提示)
33feature专题
34fewer收起
35field用于表单的输入区域
36figure
37filter筛选
38first第一个,常用于列表中
39footer页脚
40forum论坛
41gallery画廊
42group模块,清除浮动
43header页头
44help帮助
45hide隐藏
46hightlight高亮
47home主页
48icon图标
49info,information信息
50last最后一个,常用于列表中
51links链接
52login登录
53logout退出
54logo标志
55main主体
56menu菜单
57meta作者、更新时间等信息栏,一般位于标题之下
58module模块
59more更多(展开)
60msg,message消息
61nav,navigation导航
62next下一页
63nub小块
64odd奇数,常用于多行列表或表格中
65off鼠标离开
66on鼠标移过
67output输出
68pagination分页
69pop,popup弹窗
70preview预览
71previous上一页
72primary主要
73progress进度条
74promotion促销
75rcommd,recommendations推荐
76reg,register注册
77save保存
78search搜索
79secondary次要
80section区块
81selected已选
82share分享
83show显示
84sidebar边栏,侧栏
85slide幻灯片,图片切换
86sort排序
87sub次级的,子级的
88submit提交
89subscribe订阅
90subtitle副标题
91success成功(提示)
92summary摘要
93tab标签页
94table表格
95txt,text文本
96thumbnail缩略图
97time时间
98tips提示
99title标题
100video视频
101wrap容器,包,一般用于最外层
102wrapper容器,包,一般用于最外层