命名规范

目录命名

# 项目文件夹: projectname
# 样式文件夹: css
# 脚本文件夹: js
# 样式类图片文件夹: img

图片命名

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

1. 图片业务

   // pp_:拍拍
   // wx_:微信
   // sq_:手Q
   // jd_:京东

2. 图片功能类别

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

3. 图片模块名称

   // goodslist:商品列表
   // goodsinfo:商品信息
   // useravatar:用户头像

4. 图片精度

   // 普清:@1x
   // Retina:@2x|@3x

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

// 侧栏导航icon雪碧图命名
// pp_icon_mod_sidenav.png

// 处理高清图片的时候，命名应该加上图片相应的精度说明
// [e-mail]
// [e-mail]

HTML/CSS文件命名

// 确保文件命名总是以字母开头而不是数字
// 且字母一律小写，以下划线连接且不带其他标点符号

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

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

ClassName命名

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

1. 命名原则

   <!-- 祖先模块不能出现下划线，除了是全站公用模块，如 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">
     <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>

2. 模块命名

全站公共模块：以 mod_ 开头

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

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

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

1. 常用命名推荐

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

参考

1. 命名规范

2. W3C

3. Apple Developer