关于项目的一些规范

在项目开发中，有时候会遇到一些代码书写规范问题，比如css规范，eslint报错等

1、前端工程的目录规范

目录规范

• dist 把包后的最终代码包
• src 开发目录
  • components 组件
  • pages/views 页面
  • utils 工具函数封装
  • store 状态管理
• package.json
• README.md

2、BEM样式命名规范

BEM的命名规范

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面 拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。

• B，代表 Block块
• E，代表 Element块中的元素
• M，代表 Modifier状态修饰

<div class="order">
    <div class="order__info">
      <span class="order__time">订单时间</span>
      <span class="order__name">商品名称</span>
    </div>
    <div class="order__status">
      <span class="order__status--pay">待付款</span>
      <span class="order__status--receive">待签收</span>
      <span class="order__status--appi">待评价</span>
    </div>
</div>

.order {
  height: 50px;
  overflow: hidden;
}
.order__info {
  float: left;
  width: 80%;
}
.order__status {
  float: right;
  width: 20%;
}
.order__status>span {

}
.order__status--pay {
  color: red;
}
.order__status--receive {
  color: green;
}
.order__status--appi {
  color: blue;
}

3、OOCSS样式设计

OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方法，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性 （ 把原本写在一起的样式， 拆开多个class 写，提高可复用性）

• OOCSS官网
• 思考Bootstrap Button的样式设计

<button type="button" class="btn btn-danger btn-lg">使用danger的大按钮</button>
<button type="button" class="btn btn-primary btn-sm btn-radius5">使用primary的小按钮</button>

4、ESLint/JSLint

• ESLint官网

ESLint 这样的可以让你在编码的过程中发现问题，并且可以自己创建检测规则，保持代码编写风格的一致性。