前端代码中的一些css、js、html规范

阅读本篇文章大约需要8分钟，如果你有充足的时间，可以跳至文末参考文章细品。

一、问题来源

以前以为用eslint是基本，但是新加入的团队代码刷新了我认知：eslint基本都没有在用。好在新的领导者正致力于代码规范，所以我也想借此机会整理一下一些我正在用到的前端代码规范，并希望前端的亲人们看到对方的代码比人更亲切。

二、一些规范

基于eslint的一些规范和对代码长得好看有些许强迫症而整理了少许正在用的习惯，仅供参考。

1.命名规范

（1）文件夹、文件、类选择器、链接（包括链接上的参数）：

全小写，见名晓义且简短但不过度缩写，单词之间使用横杠即：- 连接：例：search-btn（button可简写为btn，但st之类的简写没有意义，可以参考通用的约定中的接口命名规范表）

与父组件关联的子组件应使用父组件名一致的前缀：例：search-form，search-btn

* 说明：组件即components文件夹下的文件可以以首字母大写的形式，但是index.vue文件使用小写。组件的文件名可以保持个人习惯，但同一项目里的组件要一致，即要么都首字母大写，要么都小写单词之间横线连接。如果有时间的话可以参考vue的风格指南。

（2）变量名、方法名：

使用驼峰形式：例：searchData

2.代码习惯，时间充足的话可以去编码规范 by @mdo查看完整的规范和例子

① 缩进

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。即编辑器中选择 Indent Using spaces -> 2

② 空格

（1）css中的空格：

样式选择器与第一个 { 之间有一个空格，} 单独成一行；

例如：

.search-btn {
  color: #fff;
  background-color: #169be8;
}

只有一行样式的单独成行；例如：.search-form { margin-top: 10px; }

每条声明的 : 后添加一个空格；

以逗号分隔的属性值后应添加空格；例如：body { font-family: Baskerville, Symbol, serif; }

rgb，rgba中的 , 后面不加空格；例如：.search-btn { background-color: rgba(0,0,0,.8); }

（2）js中的空格

等号等操作符之间左右均留出一个空格；例如：var language = localLanguage || 'zh-cn'

对象键名的 : 与值之间留出一个空格；例如：searchData = { keyword: '' }

方法名与括号之间，括号与花括号之间留出一个空格；例如：function onSubmit () {}

箭头函数的箭头左右留出一个空格；例如：setTimeout(() => {}, 100)

另，箭头函数中只有一个参数时不加括号。例如：setTimeout(response => { return response }, 100)

（3）注释空格

与内容同行的注释应与内容之间留一个空格，注释符与注释内容之间留一个空格；

例如：keyword = '' // 搜索关键字

          <!-- html内容的注释 -->

③ 引号，个人习惯js与css和标签中的引号单双相反（关于引号的使用看个人习惯，但是在一个项目里要保持一致，即所有的标签中使用都双引号，所有的js中都使用单引号，或者所有的js中都使用双引号）

（1）html中的属性值使用双引号；例如：<input type="password">

附加一点，html中的属性顺序，class 为可复用的，排在首位；id 为页面独特元素的，排在第二位

• class
• id, name
• data-*
• src, for, type, href, value
• title, alt
• role, aria-*

（2）css中的引号使用双引号；例如：.search-btn:before { content: "" }

（3）js中的引号使用单引号；例如：language = 'zh-cn'

3.css中的习惯

① 选择器：样式解析是从右到左，所以最右的选择器称为关键选择器

（1）尽量不要出现类似这种选择器，会影响性能：

* { box-sizing: border-box; }

.search-form input { border: none; }

（2）避免过度嵌套

.search-form > .search-btn > img { ... }

（3）less、sass中可以使用嵌套，但是更需要注意不要过度，并且在有多个子元素依赖父元素时使用嵌套，花括号嵌套不应超过3层。

一个子元素依赖时：.table > thead > tr > th { … }

两个子元素依赖时：

.table > thead > tr {
  > th { … }
  > td { … }
}

② 样式声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

1. Positioning
2. Box model
3. Typographic
4. Visual
5. Misc

例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  text-align: center;
  line-height: 1.5;
  font: normal 13px "Helvetica Neue", sans-serif;
  color: #333;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

③ 样式属性规范

属性不应过度简写；

例如：.search-btn { background: #169be8; }应为：.search-btn { background-color: #169be8; }

           .search-btn { padding: 0 0 15px 15px } 应为：

.search-btn {
  padding-bottom: 15px;
  padding-left: 15px;
}

0值不加单位；例如：.search-btn { margin-bottom: 0 }

0.5写为.5；例如：.search-btn { margin-bottom: -.8px; }

色值使用小写，十六进制值可缩写的缩写。例如：.search-btn { color: #fff; }

三、总结

在实现项目功能的同时注意代码好看也很重要，一手赏心悦目的代码写习惯了就不觉得是约束了。

如果本文对你有些许帮助就动动手指点个赞吧，你的鼓励是我创作的动力，笔芯。

参考：

编码规范 by @mdo

vue的风格指南

w3cschool 前端开发规范