返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

前端开发时应该注意的编码规范

时间:2017-06-26 21:37来源:电脑教程学习网 www.etwiki.cn 编辑:admin

网络上收集的前端开发时应该注意的编码规范,包括 HTML、CSS、JavaScript 等前端开发语言。

HTML

语法

  • 四个空格代替制表符(tab)。

  • 注释、注释、注释。

  • 嵌套元素须缩进一次,杜绝内容错乱。

  • 属性定义一律使用双引号。

  • 标签结束加上斜杠,包括单标签。

  • 保证标签语义化。

  • 属性应按照一定顺序依次排列,确保代码易读性。

属性排序

  • class

  • id,name

  • data-*

  • src,for,type,href

  • title,alt

  • aria-*,role


CSS

语法

  • 四个空格代替制表符(tab)。

  • 命名:类名使用小写字母,中划线分隔,id采用驼峰式命名。

  • 每写完一个选择器的属性后,添加一个回车保证代码易读。

  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。

  • 每条属性声明的冒号后面需添加一个空格。

  • 每条属性声明应该独占一行。

  • 每条属性声明结尾都应加上分号表示结束。

  • 十六进制值应该全部小写。

  • 属性应按照一定顺序依次排列,确保代码易读性。


属性排序

  • positioning(定位),如 postion,margin

  • box model(盒模型),如width,float

  • typographic(印刷),如font,color

  • visual(视觉),如background,border


JavaScript

语法

  • 四个空格代替制表符(tab)。

  • 注释、注释、注释。

  • 字符串最外层统一使用单引号。

  • 命名:变量函数采用驼峰式命名,常量全大写,用下划线连接。

  • 构造函数,首字母大写。

  • jquery对象以$开头命名。

  • 一个函数作用于内所有变量声明放在函数首部,只用一个var声明,逗号隔开。

  • 多用===和!==,少用==和!=。

  • 上下文this引用统一使用self变量来命名。

------分隔线----------------------------
标签(Tag):前端开发 编码规范
------分隔线----------------------------
推荐内容
猜你感兴趣