前端开发命名规范

1、目录规范

项目命名：projectname
全部采用小写方式，以中划线分割：mall-managerment-system

目录命名：
全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。

2、图片命名

命名顺序：
图片业务（可选） +（mod-）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选） :::warning 图片业务：
pp-：拍拍
wx-：微信
sq-：手Q
jd-：京东商城
… ::: :::info 图片功能类别：
mod-：是否公共，可选
icon：模块类固化的图标
logo：LOGO类
spr：单页面各种元素合并集合
btn：按钮
bg：可平铺或者大背景
… :::

图片模块名称： goodslist：商品列表 goodsinfo：商品信息 userava tar：用户头像 …

:::tips 图片精度：
普清：@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

3、HTML/CSS文件命名

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

jdc.html jdc-list.html jdc-detail.html jdc.scss jdc-list.scss jdc-detail.scss

4、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="">
        <!-- 这个时候 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>

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

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

常用命名推荐