前端代码规范1.0

前段时间在看一些规范性的东西记在了笔记上，今天在这里拿出来给大家分享一下，目前我采用（学习到）的一些规范约束 【后面会持续更新。。。。】

---

1.文件/资源命名

1.1 资源名全部小写

1.2 - 分割名称 .来描述后缀 （my-base.min.js）

---

2 协议

2.1 不要指定协议部分（http:, https:），除非这两者协议都不可用

eg： 【推荐使用这种】

---

3 缩进

3.1 一次性缩进合适的空格（我用的2个）

---

4 格式化规则

4.1 在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。

4.2 HTML 使用双引号(“ ”) 而不是单引号(‘ ’) 。

---

5 IIFE

5.1 IIFE立即执行函数，使用这个可以防止全局命名空间被污染

推荐格式:

( function( ){ }( ) )

5.2 严格模式，最好放在独立的IIFE里面使用，ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。

eg:

(function(){
  'use strict';

  // Your code starts here

}());

---

6 字符串

6.1 js统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处

---

7 变量赋值时的逻辑操作

7.1 逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。

---

8 css/scss

8.1 class/id 命名语义化

8.2 CSS选择器中避免标签名

8.3 省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

8.4 CSS提供了各种缩写属性（如 font字体）应该尽可能使用，即使在只设置一个值的情况下。
使用缩写属性对于代码效率和可读性是有很有用的。

8.5 声明顺序：

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

display

position, left, top, right etc.

overflow, float, clear etc.

margin, padding

表现性属性：

background, border etc.

font, text

8.6 属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格

8.7 每个选择器和属性声明总是使用新的一行。

8.8 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。url值（url()）不要使用引号。

8.9当使用Sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分