前端编码规范那些事
2016-12-25 本文已影响0人
大春春
为了编写出更高可读性，结构更加清晰且冗余较少的代码，前端工程师们总结出了一些前端的编码规范，它们涵盖了前端的所有部分，包括HTML、CSS和JS，以下也是围绕这三个方面，对这些前端代码的编码规范做一个大致的复习和巩固。
一、HTML的编码规范
- 首当其冲的自然就是
<!DOCTYPE html>，文档类型声明。在不同的时期，<!DOCTYPE html>的写法有所不同，但它最重要的功能对文档的类型进行声明却从未更改，如果不添加该声明，浏览器渲染时会以怪异模式进行文档渲染。
文档类型声明
- 语言类型和编码类型要写，他们通常的写法如下：（语言类型写在根节点
<html>上，编码类型写在<meta>便签里）：
语言类型和编码类型
- JS引入写在
<body>标签的最后可有效防止因为JS文件加载不出来而导致的白屏问题：
JS脚本引入的书写位置
- 注重html的语义化，使用相应内容的标签：以下是推荐和不推荐的写法
语义化
- 友好的图片，尽量写
<img>标签alt和title属性，alt属性用于图片挂掉时对图片内容进行提示，title用于鼠标浮于图片上时进行内容提示（装饰性的图片无需填写，用于省字符数）
title属性作用
alt图片内容提示
- H5引入CSS和JS时可以不写type属性，style标签默认type是CSS文件，script标签type默认是JS文件
引入外链
- 引号问题，在HTML中的书写尽量使用双引号
""，少使用单引号''，这点也要看公司的规定而言，但是引号的使用要统一，不要一下单引号一下双引号：
不推荐的引号用法
- H5中，空白元素标签如
link,meta,img,br,hr,input等，在结尾不需要添加/符号进行结束
空白标签的结束不需要'/'
- 其它：1、注意嵌套标签的结束；2、JS和CSS尽量使用外链，有助于样式与内容的分离；3、尽量书写注释对HTML内容结构进行梳理；
二、CSS编码规范
- CSS书写的顺序
1.位置相关（position，float，display，top，right等）；
2.盒模型相关（width，height，margin，padding等）；
3.字体相关（size，color，family，line-height等）；
4.背景和边框（background，border）；
5.其它（transition等）；
正确顺序
- 尽量使用CSS缩写精简代码（字体，边框，内/外边距等）
CSS样式缩写
- 选择器与后面的'{'要有一个空格，样式属性与值之间要有一个空格
空格
- 多个选择器同时用时要有换行
多选择器之间换行
- 0不需要加单位，0.n的单位不需要写0
单位书写
- 使用16进制颜色时，当每两位相同的可以进行缩写
颜色缩写
- 其它：1、每条样式用
;进行结尾；2、样式要进行缩进；3、尽量避免使用标签选择器，可以使用子选择器和兄弟选择器；
三、JS书写规范
- 变量声明用
var，多个变量命名可以用一个var，然后用逗号,进行分隔：
变量命名
- 变量尽量写在变量声明中：
变量书写
- 立即执行函数书写：尽量将整个函数包裹在括号内：
立即执行函数书写
- 每个独立语句用
;进行结束：
用分号进行语句结束
- 其它规范：1、注意函数内部的缩进；2、尽量编写注释；3、格式对齐以及缩进；
四、命名规则
-
CSS选择器的命名规则
1.命名用英文小写字母书写；
2.命名体现出内容、功能或者样式(样式命名少用)，注重语义化；
3.多个单词的命名使用中横线-进行连接；
4.id选择器在HTML中只在大区块上进行添加，尽量少用，其它可使用类选择器；
5.命名如果采用缩写要使人能看懂，不要使用无意义的命名；
6.属性的值要用双引号括起来，如：class = "nav";； -
JS的命名
1.命名采用驼峰式命名，第一个单词小写，后面的单词首字母大写；
2.函数的命名使用动词，或者动词+名词的形式；
- CSS选择器常用命名参考
常用的CSS命名规则
五、总结
1.做到语义化，方便阅读和优化；
2.代码尽量简单，结构明晰，冗余少；
3.注意书写注释；
4.注意健壮性和可复用性；
文章著作权归饥人谷_大春和饥人谷所有，转载须说明来源
