命名规范 - 《O2前端规范文档》

项目文件夹：your project name
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：images

确保命名总是以字母开头而不是数字，且字母一律小写，以下划线连接

命名顺序

图片命名建议以以下顺序命名：

图片业务(可选) +（mod_) 图片功能类别（必选）+ 图片模块名称（可选) + 图片精度（可选）

图片业务：
- pp_：拍拍
- wx_：微信
- sq_：手Q
- jd_：京东商城
- …
图片功能类别：
- mod_：是否公共，可选
- icon：模块类固化的图标
- logo：LOGO类
- spr：单页面各种元素合并集合
- btn：按钮
- bg：可平铺或者大背景
- …
图片模块名称：
- goodslist：商品列表
- userava tar：用户头像
- …
图片精度：
- 普清：
- Retina： |
- …


wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 
非公共模块：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

交叉业务协作

业务交叉协作的时候，为了避免图片命名冲突，建议图片名加上业务和模块前辍，如拍拍侧和手Q侧的业务交叉合作时，侧栏导航icon雪碧图命名：

推荐：
pp_icon_mod_sidenav.png
不推荐：
icon_mod_sidenav.png

处理高清图片的时候，命名应该加上图片相应的精度说明

推荐：
jdc_logo@1x.png
jdc_logo@2x.png
不推荐：
jdc_logo_retina.png

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

命名原则

基于姓氏命名法（继承 + 外来），如下图：

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

推荐：

<div class="modulename_info">
    <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="">
                <!-- 这个时候 jiui 为 modulename_info_user_img 首字母缩写-->
                <div class="jiui_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,baaner 等有机会和广告挂勾的字眠不建议直接用来做 ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此

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

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="isis"></div> 
<div class="KMT"></div> 
...