前端必备编码规范
2017-04-04 本文已影响157人
hanyuntao
总结本规范的目的不是大而全，而是把我们最常用的规范总结一下，花最少的精力记住最重要的内容。
1. 一般规范
列举了一些可应用在 HTML, JavaScript 和 CSS 上的通用规则。
1.1 文件/资源命名
- 文件命名以字母开头，全部小写，单词之间以减号（-）连接，如
my-camel-case-name.css。
（驼峰命名法用在javascript的变量及函数的命名中）
1.2 协议
-
src和url所指路径不带http:或https:，如src="//cdn.com/foundation.min.js"。
1.3 缩进
- 官方（W3C）没有给出，建议缩进4或2个空格（不要使用tab），与团队保持一致。
1.4 关注点分离
- 严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。
就是说，尽量在文档和模板中只包含结构性的 HTML，而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
2. html规范
2.1 语义化标签
主流页面布局
-
<header>表示页眉,页头 -
<nav>表示导航内容； -
<section>表示文档中的节、区段，一般包含标题和内容； -
<article>可以看成是一种特殊类型的section元素，比section更强调独立性。比如blog的内容，报纸的文章。（具体区别可以查看div section 和article的区别）； -
<aside>表示article以外的内容，而且应该和article有一定的关系，块级元素; -
<footer>表示页脚； -
<div>本身无特殊含义，用于布局。
另外，尽量用alt标签去描述图片。
HTML 标签的目的，是为展示内容信息。
- 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
- 不要将 img 元素当做专门用来做视觉设计的元素
2.2 属性
- HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
-
class(首位) -
id、name data-*-
src、for、type、href -
title、alt -
aria-*、role
- id 和 class
id一般用于网页大致布局，比如标志、导航、主体内容、版权，规范命名为#logo,#nav,#content,#copyright。一般项目中class用于css中，id被js用来操作dom且不添加样式，（jq操作的class一般不加样式）。
class的命名原则：
- 内容优先，表现为辅
- 一律小写，多个单词以连字符连接
2.3 格式
- html中使用双引号，不用单引号，如
class="news-article"。 - 每一个块状元素，列表元素和表格元素后，加上一新空白行。
- 内联元素写在一行内，块状元素还有列表和表格要另起一行。
3. css规范
3.1 属性声明顺序
- 显示属性
- 元素属性
- 内容属性
/* 显示属性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float
/* 元素属性 */
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 内容属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
3.2 格式
- 小图片（必须）
sprite合并 - 每个样式属性后加 "
;" - 属性名的冒号后使用一个空格
- 选择器分离和声明分离
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
- 规则之间始终有一个空行
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
- 选择器中避免标签名,如
div.subnav - 避免使用通配规则
- 规则越具体越好
尽量不要使用ul li a这样长的选择符，最好使用.content >.content-body >.title之类的选择符。 - 省略“0”值后面的单位
- 使用小写的十六进制数字
在可能的情况下，使用3个字符的十六进制表示法。
3.3 css文件命名规范
主要的 master.css；
模块 module.css；
基本共用 base.css；
布局，版面layout.css；
主题 themes.css；
专栏 columns.css；
文字 font.css；
表单 forms.css；
补丁 mend.css；
打印print.css
4. javaScript规范
4.1 命名规范
函数和变量命名采用驼峰命名法。
4.2 编码规则
- 采用统一的缩进方式排版代码；
- 关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格；
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
- 左大括号"
{"可以居行尾，也可写在下行首（独自一行）,右大括号"}"单独占一行，居行首； - 句末必须用分号结尾；
- 单行过长应在适当位置予以换行,增强可读性；
- if、while、for、do语句的执行体总是用"
{"和"}"括起来，即使在其结构体内只有一条语句； - 语法意义相互独立的代码将用空行分隔。
错误之处，敬请之处，谢谢您的阅读。
