前端开发规范


CSS相关

命名规范

screen-capture

尽量避免使用id选择器，使用class选择器，不要使用标签选择器设置样式

使用BEM规范

标准的 BEM 写法是：.block-name__element-name--modifier-name

  • Block
1
2
3
可以使用字母，数字，连字符进行命名
任何html元素都可以成为一个block
不依赖于页面上的其他block或者element。
1
<header class="header"></header>
1
2
3
4
.header {
  color: #333;
  background: #f5f5f5;
}

  • Element
1
组成块的一部分，内部的任何元素都与块有关联，不能在块的外部使用
1
2
3
4
<article class="article">
  <h2 class="article__title"></h2>
  <p class="article__content"></p>
</article>
1
2
3
4
5
6
7
8
9
10
11
.article {
  padding: 12px;
  
  &__title {
    font-size: 1rem;
  }
  
  &__content {
    font-size: .9rem;
  }
}
  • Modifier
1
用来表示块或者元素的状态，外观或者行为，不必须，可以选择使用
1
<button class="btn btn--disabled"></button>
1
2
3
4
5
6
7
8
9
.btn {
  color:  #333;
  background-color: #fff;
  
  &--disabled{
    color: #fff;
  background-color: #6c757d;
  }
}

示例

截图 
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="list-card">
  <img class="list-card__img" />
  <div class="list-card__content">
    <a class="list-card__link"></a>
    <p class="list-card__desc"></p>
    <div class="list-card__stats">
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__date"></span>
    </div>
  </div>
</div>
1
2
当然，BEM 不是必须的，你依然可以选择自己喜欢的方式编写，组织你的 CSS 代码。
你也可以使用  block-element_modifier 的方式。

Mix

1
2
3
一种在一个DOM节点上使用不同BEM的方法:
1.组合不同实体的行为和样式，而不需要复制代码
2.基于现有的组件组合创造出新的组件 
1
2
3
4
5
6
7
8
<!-- `header` block -->
<div class="header">
    <!--
        The `search-form` block is mixed with the `search-form` element
        from the `header` block
    -->
    <div class="search-form header__search-form"></div>
</div>

常见的CSS class类名

1
2
3
4
5
6
7
包裹类： container, wrapper, outer, inner, box, header, footer,main, content, aside, page, section, block
状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading
尺寸类： large, middle, small, bigger, smaller
组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog
位置类： first, last, current, prev, next, forward, back
文本类： title, desc, content, date, author, category，label，tag
人物类： avatar, name, age, post, intro

参考来源：BEM命名规范入门及常用CSS class 命名 、css BEM书写规范



预编译处理器

  • 预编译处理器不要嵌套太多层，一般 不超过5层 ，超过5层则必须要拆分以减少css代码量；
  • 使用BEM规范选择器建议不超过2级，命名上不要使用B__E__E的写法(B: block,E:element);

布局

  • 如果没有浏览器兼容问题则使用flex布局

  • 页面上的样式相同时应当抽取公共部分进行类名 class 进行引用

  • 页面尽量布局尽量考虑做严谨一些


JS相关

变量声明时，确定不变的写成常量 const，而不是过度使用变量声明 let，var声明基本不用。

命名

  • 统一使用驼峰(camelCase)命名(对象、函数、实例)
1
2
3
4
5
6
7
8
9
10
11
// good
function getValue() {}

// bad
function getvalue() {}

// good
const userName = "xxx"；

// bad
const username = "xxx"

  • 用 PascalCase 命名类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

格式规范

使用eslint+prettier插件进行统一管理配置，解决eslint和prettier相关冲突问题 

1
eslint规则在.eslintrc.js中定义，规定好相关规则;

主要注意一下几条：

  • 代码缩进用4或者2空格
  • 语句必须默认后加分号
  • 使用单引号或双引号等相关配置(还有很多，配置参考)
  • 提交代码前将console.log语句删掉或注释掉(不然影响其他开发人员调试)

一些情况是不需要检测的，例如第3方的库, 框架、组件、ui库等等，可以将这些文件放在.eslintignore文件中，可以忽略eslint的检测

来源：稀土掘金


prettier

  1. 安装依赖：
    1
    2
    3
    npm install --save-dev --save-exact prettier 
    // or
    yarn add --dev --exact prettier
  2. 创建一个空配置文件，配置相关配置（相关配置 百度一下 ）
    1
    在根目录下创建 .prettierrc.json
  3. 创建一个.prettierignore文件，用于忽略文件不能格式化
    1
    2
    3
    4
    # Ignore artifacts:
    dist
    build
    coverage
  4. VSCode安装 Prettier-Code Formater插件并配置 format On Save 进行保存格式化。

prettier 和 eslint 会有一些配置上的冲突

安装eslint-config-prettier以使 ESLint 和 Prettier 相互配合，安装完后在.eslintrc中配置（以Create-React-App为例）

1
2
3
4
5
6
7
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  }

来源：前端开发爱好者


代码

多使用函数式编程

  • es5：filter，map，reduce，slice，concat
  • es6+: findIndex，find，includes，some，isArray等

枚举或标识不要使用中文

在项目中尽量不要使用中文进行传值，个人对声明值为中文是较为反感的。

注释

有必要时可添加添加 jsDoc注释 进行一些注释提示；

可以通过输入 /** 然后 Enter 快速生成注释；

变量/函数 声明时，可为弱类型提供代码提示；

参考：JSDoc 注释规范


vue项目相关

v-for

  • 一定要加上key，一般key取id或者唯一的变量值，比如:key=”item.id”,:key=”item.uuid”等，如果没有则使用index进行绑定

维护重用

  • 项目页面上超过一千行代码时应当考虑抽取封装组件，单个功能要抽离到当前文件目录下的components目录下，以单独组件方式引入到当前页面使用
  • 页面上代码相同时 （超过3次） 应抽离成通用方法进行开发，如多个页面都用到，抽取成当前业务块的公共方法，多个业务块用到则抽取成全局方法
  • 使用频率较高的工具类函数抽离到utils/index.js工具类中

项目目录结构

  • 按业务模块进行目录划分，一个业务模块只负责当前业务模块内的事情
  • 业务模块的公共方法也可在当前业务模块目录下建立一个公共common目录进行存放

其他一些文件命名和编码规范

下面有几篇较为全面的一些风格指南，择其一些相应的规范约束自己，写出较舒服的代码

地址：史上最全 Vue 前端代码风格指南、前端开发规范文档、vue官方风格指南


业务相关

列表

  • 列表规定显示为一行/三行/五行(在开发时应该提前和产品确认规定)，超出文字使用一致省略

  • 预知长度固定值或较短的字典值，宽度设为固定宽度

  • 表格数据请求方法时需要给表格添加loading加载状态(常规做法是请求封装)

    具体方式：百度一下

对话框表单提交

  • 给对应的提交请求按钮添加loading请求限制操作或者添加模态加载等操作安全(常规做法是请求封装)

    具体方式：百度一下

(其他业务相关约定有待补充)


命名相关

变量命名

变量名应该使用清晰具体含义的英文描述，避免用一个字母命名，而应改使命名更加语义化

  • 使用易读的命名
  • 描述变量名尽量简洁精确，具体这个变量是做什么操作
  • 像data/value这些并不清楚是做什么的，如果使用则应考虑是否能明显地从上下文知道数据的含义