web前端编码规范

前段编码规范

一般规范

1.减号(-)是用来分隔文件名
2.不指定协议使得 URL 从绝对的获取路径转变为相对的
3.文本缩进 一次缩进两个空格。
4.注释 每个方法 重要变量都应该有注释 使用yuidoc.js
5.代码检查

html规范

1.推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>
2.HTML 验证 使用能通过标准规范验证的 HTML 代码
3.脚本加载 js 防止dom阻塞 并且适当加上async 属性
4.用语义化的标签 方便阅读
5.多媒体回溯 使用alt元素方便解释
6.关注点分离 严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。
不使用超过一到两张样式表(i.e. main.css, vendor.css)
不使用超过一到两个脚本(学会用合并脚本)
不使用行内样式(
不在元素上使用 style 属性(



不使用行内脚本(
不使用表象元素(i.e. , ,
, ,
不使用表象 class 名(i.e. red, left, center)
7.Tab Index 在可用性上的运用

#javascript规范
1.全局命名空间污染与 IIFE
2.IIFE(立即执行的函数表达式)
3.使用严格模式
4.变量声明 var
5.理解 JavaScript 的定义域和定义域提升
6.总是使用带类型判断的比较判断 总是使用 === 精确的比较操作符
7.明智地使用真假判断
8.变量赋值时的逻辑操作
9.一定要加分号
10.嵌套函数
11.语句块内的函数声明
12.异常
13.简易的原型继承
14.使用闭包
15.切勿在循环中创建函数
16.eval 函数(魔鬼)
17.this 关键字 使用场景:在构造函数中 在对象的方法中(包括由此创建出的闭包内)
18.首选函数式风格
19.数组和对象的属性迭代
20.不要使用 switch
21.数组和对象字面量
22修改内建对象的原型链,应当也要避免。
23.自定义 toString() 方法
24.字符串 统一使用单引号(‘),不使用双引号(“)。
25.三元条件判断(if 的快捷方法)

#CSS and Sass (SCSS) style rules
1.ID and class naming
2.合理的避免使用ID ID不应该被应用于样式 你应该始终考虑使用class
3.CSS选择器中避免标签名 构建选择器时应该使用清晰, 准确和有语义的class(类)名
4.尽可能的精确
5.尽量使用缩写属性
6.省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
7.十六进制表示法 3个字符的十六进制表示法更简短。 始终使用小写的十六进制数字。
8.ID 和 Class(类) 名的分隔符 使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。
9.声明顺序
结构性属性:
1.display
2.position, left, top, right etc.
3.overflow, float, clear etc.
4.margin, padding
表现性属性:
1.background, border etc.
2.font, text
10.声明结束 为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。
11.属性名结束 属性名的冒号后使用一个空格。出于一致性的原因, 属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。
12.选择器和声明分离 每个选择器和属性声明总是使用新的一行。
13.规则分隔 规则之间始终有一个空行(双换行符)分隔。
14.CSS引号 属性选择器或属性值用双引号(””),而不是单引号(”)括起来。 URI值(url())不要使用引号。
15.选择器嵌套 (SCSS) 嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
16.嵌套中引入 空行 (SCSS) 嵌套选择器和CSS属性之间空一行。
17.上下文媒体查询(SCSS)
在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。
18.嵌套顺序和父级选择器(SCSS)
当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分

分享到