命名规范

由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。

目录命名

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

HTML/CSS文件命名

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

<!-- HTML -->
jdc.html
jdc_list.html
jdc_detail.html
<!-- SASS -->
jdc.scss
jdc_list.scss
jdc_detail.scss

图片命名

命名顺序

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

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

• 图片业务：

  • pp_：拍拍
  • wx_：微信
  • sq_：手Q
  • jd_：京东商城
  • …

• 图片功能类别：

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

• 图片模块名称：

  • goodslist：商品列表
  • goodsinfo：商品信息
  • userava tar：用户头像
  • …

• 图片精度：

  • 普清：@1x
  • Retina：@2x | @3x
  • …

如下面例子：

公共模块：
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.png
jdc_logo_retina.png

ClassName命名

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

命名原则

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

祖先模块不能出现下划线，除了是全站公用模块，如 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="">
                <!-- 这个时候 jiui 为 modulename_info_user_img 首字母缩写-->
                <div class="jiui_tit"></div>
                <div class="jiui_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,baaner 等有机会和广告挂勾的字眠不建议直接用来做 ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此

<div class="ad"></div> 这种情况不应该出现

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

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