前端代码规范

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

1.文件/资源命名

1.1 资源名全部小写

1.2 – 分割名称 .来描述后缀 (my-base.min.js)

2 协议

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

eg:<script src=”//cdn.com/foundation.min.js”></script> 【推荐使用这种】

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
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的上下文媒体查询
子选择器作为最后的部分

持续更新中!

    原文作者:_proto_麻瓜一袁
    原文地址: https://www.jianshu.com/p/1e27247c6c89
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞