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

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

    命名顺序

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

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

    • 图片业务:

      • pp_:拍拍
      • wx_:微信
      • sq_:手Q
      • jd_:京东商城
    • 图片功能类别:

      • mod_:是否公共,可选
      • icon:模块类固化的图标
      • logo:LOGO类
      • spr:单页面各种元素合并集合
      • btn:按钮
      • bg:可平铺或者大背景
    • 图片模块名称:

      • goodslist:商品列表
      • userava tar:用户头像
    • 图片精度:

    1. wx_mod_btn_goodlist@2x.png
    2. wx_mod_btn_goodlist.png
    3. mod_btn_goodlist.png
    4. 非公共模块:
    5. wx_btn_goodlist@2x.png
    6. wx_btn_goodlist.png
    7. btn_goodlist.png

    交叉业务协作

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

    1. 推荐:
    2. pp_icon_mod_sidenav.png
    3. 不推荐:
    4. icon_mod_sidenav.png

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

    1. 推荐:
    2. jdc_logo@1x.png
    3. jdc_logo@2x.png
    4. 不推荐:
    5. jdc_logo_retina.png

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

    命名原则

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

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

    推荐:

    1. <div class="modulename_info">
    2. <div class="modulename_info_son"></div>
    3. ...
    4. </div>

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

    1. <div class="modulename">
    2. <div class="modulename_cover"></div>
    3. <div class="modulename_info"></div>
    4. </div>

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

    推荐:

    1. <div class="modulename">
    2. <div class="modulename_cover"></div>
    3. <div class="modulename_info">
    4. <div class="modulename_info_user">
    5. <div class="modulename_info_user_img">
    6. <img src="" alt="">
    7. <!-- 这个时候 jiui 为 modulename_info_user_img 首字母缩写-->
    8. <div class="jiui_txt"></div>
    9. ...
    10. </div>
    11. </div>
    12. <div class="modulename_info_list"></div>
    13. </div>
    14. </div>

    不推荐:

    模块命名

    全站公共模块:以 mod_ 开头

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

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

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

    常用命名推荐

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

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

    1. <div class="fuck"></div>
    2. <div class="jer"></div>
    3. <div class="sm"></div>
    4. <div class="isis"></div>
    5. <div class="KMT"></div>
    6. ...