前端规范

cathy_1007
224 阅读4分钟

前言

有一天后端人员说希望给他们一份H5页面指导文件。毕竟他们不常写前端，有些语法规范用的不熟练。我陆陆续续看过很多的规范指导，但是真让我说出个一二三来，还不知从哪里说起，因为这些规范真的很详细很琐碎。于是我搜索了一些文章博客，找到一篇文章和我实践过的大致一样，加工整理了如下内容：

总则

  1. 符合web标准(UTF-8,HTML5)
  2. 结构表现行为分离：HTML-CSS-JS代码分离
  3. 代码要求简洁明了有序
  4. 尽可能的减小服务器负载，保证最快的解析速度

文件规范

  1. 目录结构

    css：存在css文件,其中css使用Normallize进行初始化；base.css是样式重定义文件
    imgs：存放静态图片和图标
    page：存放其他页面
    lib：存放第三方库、插件

  2. 所有文件夹及文件使用英文命名，避免使用中文路径
  3. 入口文件使用index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html文件命名一致并合理存放

HTML规范

总体要求

  1. 文档类型声明及编码：统一为html5声明类型；编码为UTF-8
  2. 标签语义化，如标题根据重要性用h*(同一页面只能有一个h2)，段落标记用p，列表用ul，内联元素中不可嵌套块级元素
  3. 尽可能减少div多层级嵌套
  4. 非特殊情况下css文件放在body部分标签后
  5. 非特殊情况下大部分JS文件放在标签尾部（如果需要界面未加载前执行的代码可以放在head标签后）避免行内JS和CSS代码
  6. 引入JS库文件，文件名须包含库名称及版本号及是否为压缩版，比如jquery-1.4.1.min.js。引入插件，文件名格式为库名称+插件名称，比如jQuery.bootstrap.js 7.给区块代码及重要功能(比如循环)加上注释，方便后台添加功能

细节部分

  1. 标签&属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括br()，hr()等。属性值用双引号
  2. 需要为html元素添加自定义属性的时候，须以"data-"为前缀来添加自定义属性，避免使用"data："等其他命名方式
  3. 书写链接地址时，必须避免重定向，例如：href="http：//myVue.com/"
  4. 必须为含有描述性表单元素(input，textarea)添加label
  5. 重要图片必须加上alt属性。给重要的元素和截断的元素加上title
  6. 能以背景形式呈现的图片，尽量写入css样式中
  7. 特殊符号：尽可能使用代码替代：比如<(<)&>(>)&空格()&»(»)等等

CSS规范

  1. class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的
  2. 规避class与id同名
  3. 为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show
  4. 其他样式名称由小写英文&数字&来组合命名，如i_comment，fontred，width200。避免使用中文拼音
  5. 谨慎使用：!important、 z-index定位
  6. 数值：小于1的小数，可省略0，opacity: .4，为0的就不要单位 margin: 0
  7. 避免兼容性属性的使用，比如text-shadow||css3的相关属性
  8. 减少使用影响性能的属性，比如position：absolute||float

JS规范

  1. 二元运算符左右空格，一元运算符不允许有空格；冒号逗号之后有空格；逗号之后有空格
  2. 函数定义结束不加分号，每行代码结束必须有分号
  3. 变量命名：驼峰式命名.原生JS变量要求是纯英文字母，首字母须小写，如myVue
  4. 类命名：首字母大写，如ClassVue
  5. 函数命名：首字母小写驼峰式命名.如myVue()
  6. 尽量避免使用存在兼容性及消耗资源的方法或属性，比如eval()&innerText

一些好的规范

  1. Google JavaScript Style Guide：Google 公司的 JavaScript 的编码规范
  2. Frontend Guidelines： HTML、CSS、JavaScript 相关的最佳实践
  3. Guidelines for Responsive Web Design：响应式 Web 设计的规范和最佳实践

! 如果原作者看到此篇文章，请联系我！我忘记你的博客链接了。

avatar
文章
阅读
粉丝