<a href="#">前端编码规范—— HTML 篇</a>
<a href="#css">前端编码规范—— CSS 篇</a>
<a href="#js">前端编码规范—— JavaScript 篇</a>
这几天和团队开发了一个项目，由于编程的时候不怎么规范，代码质量不怎么高，所以后期维护起来会相当浪费时间，特写一篇关于主要针对实验室的前端开发规范的文章，希望大家都能遵循这个规则，如果你有更好的建议，我愿意虚心请教。
HTML的命名规则
文件名称命名统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊符号，遵循两个原则：
1.方便理解；2.方便查找。
不推荐
产品.html
index_%.html
about-us.html
1.html
推荐
product.html
index.html
aboutus.html
多媒体回溯
对于页面上的媒体而言，像图片、视频、canvas 动画等，要保证有可替代的接入接口。比如图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。
这样的好处是什么。首先如果无法显示图像，浏览器将显示替代文本，其次，对于盲人用户如果没有 @alt 的话就好比看天书啦。
（纯装饰性的图片可以内容为空这么做：alt=""）
不推荐
<img src="/img/logo.jpg" />
<img src="/img/girl.jpg" />
推荐
<img src="/img/logo.jpg" alt="logo" title="xxx 企业logo"/>
<img src="/img/girl.jpg" alt="" title=""/>
信息、外观和行为的分离
这里的信息（HTML 结构）、外观（CSS）和行为（JavaScript）我们要尽可能的将它们分离开来，使它们成为可维护的干净整洁的代码。
- 不使用行内样式（<style>.no-good {}</style>）
- 不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
- 不使用行内脚本（<script>alert('no good')</script>）
- 不使用表象元素（<center>, <font>）
- 不使用表象 class/id 命名（ired, left, center）
<!DOCTYPE html>
<html>
<head>
</head>
<style>
b{font-size:20px;
}
</style>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
<div class="red">I'm important!</div>
</body>
</html>
推荐
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<!--css样式统一放在一个文件中，然后将css文件引入到html中-->
</head>
<body>
<h1 class="title"></h1>
<!--避免将css样式直接写在标签里面-->
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<!--避免使用center，b 等表象元素布局-->
<span class="comment">Dare you center me!</span>
<div class="important">I'm important!</div>
<!--class／id的命名不要使用表象元素的名称命名，比如class="red"-->
<script async src="main.js"></script>
<!--js文件也是统一放在一个文件中，然后将js文件引入到html中-->
</body>
</html>
HTML 引号、缩进和注释
- 写代码一定要写注释
- 写代码一定要写注释
- 写代码一定要写注释
重要事说三遍！
- 使用双引号("") 而不是单引号('')
- tab缩进为两个空格
- html注释的格式统一为：
（对于一般性的解释说明可以去掉start、end，如）
不推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<header>
<nav class='header'>
<div class='container'></div>
</nav>
<nav class="main-nav">
<div class="container"></div></nav>
</header>
<footer>
<div class="container"></div>
</footer>
</body>
</html>
推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- 头部 start-->
<header>
<!-- 顶部 start-->
<nav class='header'>
<div class='container'></div>
</nav>
<!-- 顶部 end-->
<!-- logo+导航 start-->
<nav class="main-nav">
<div class="container">
<h1>这是标题1</h1>
<!---这是全文的正文标题-->
</div>
</nav>
<!-- logo+导航 end-->
</header>
<!-- 头部 end-->
<!-- 正文 start-->
<div class="container"></div>
<!-- 正文 end-->
<footer>
<div class="container"></div>
</footer>
</body>
</html>
命名规范
实验室的很多前端小伙伴初学编程都不怎么注意这些，只管实现效果就好了，其实我也是这么做的，但是经过这次项目的折磨后，深刻体会到命名规范的问题，因为当你再回首查看自己的代码时，发现自己竟然看不懂到底自己写的是啥，如果别人也是命名不规范，把他的代码给你修改一下，你会发现，这就是传说的青云志中的天书，看都看不懂，哈哈。
命名遵循几个要点：
- 语义化
- 简明化
- 用英文（视具体情况而定，不会英文百度翻译）
附上常用命名英文翻译：
其他
- 中文首选：宋体
- 英文和数字首选：verdana,arial
- 字体大小：9pt和11pt或12px和14.7px（黑体加粗或宋体加粗选用11pt和14.7px）
- 网站链接全部采用相对路径（不懂的自行百度相对路径和绝对路径的区别）
- 用"javascript:void(null)"代替< a href="#"></a>中的#，可避免点击的时候将当前页面重置到首端
- 使用table布局的时候要把thead,tbody,tfoot都要写上，对于你来说可能显得多余，但是对于以后的维护那是很重要的
- 能用背景色替代图片就用背景色，尽量切小图片进行平铺
- logo大小 一般是88x31 其他还有120x60和120x90大小的
<a id="css">CSS一般规范</a>
一般来说id是不应该应用于样式的，尽量使用class,避免使用标签选择器，如果一定要使用 请在前面加一只限制范围的class选择器，一般来说针对同一样式的选择器不超过三个为好。
不推荐
.p-1 {//命名不规范
font-weight: 600;
}
#content #title {//使用了id
font-size: 14px;
}
div.content > header.content-header > h2.title {//使用了标签名
font-size: 2em;
}
.container .nav ul li a{//选择器太多
color:#000;
}
推荐
.content {
font-weight: 600;
}
.content .title {
font-size: 14px;
}
.content >.content-header >.title {
font-size: 2em;
}
.nav li a{
color:#000;
}
ps
⭐️当实验室是以团队开发一个项目时，如果是一个从0开始的项目，那么每个人都会有几个页面要写，每个页面请尽量都新建一个css的文件写一份独立的样式，然后引入到html中，因为实验室很多人都是刚开始接触前端，所以不推荐一开始就学大公司的那种写全局样式的形式。
⭐️如果是接手的一个中期的项目，当大家分配几个页面时，css样式一定要新建一个文件写，不要在别人的样式里写，更不要写在html中，这样后期合并会相当麻烦，最重要的一点就是写css样式的时候记得在最前面添加一个全局的独有的class选择器，(一般来说这种项目都是很规范的，会有公共样式，重用样式等)这里推荐以 功能+自己姓名的小写字母开头作为全局独有的class选择器，这样做的好处是后期css合并为一个css文件时方便合并，不会担心大家写的样式相互干扰。
不推荐
<div class="nav">
<ul>
<li>首页</li>
<li>产品介绍</li>
<li>关于我们</li>
</ul>
<div>
／*----------针对接手的是中期项目而言 start----------*／
.nav li a{//这里的.nav假定为公共class，那后期合并会相互干扰
padding-top:10px;
}
／*----------针对接手的是中期项目而言 end----------*／
推荐
<div class="nav nav-hqg">
<ul>
<li>首页</li>
<li>产品介绍</li>
<li>关于我们</li>
</ul>
<div>
／*----------针对接手的是中期项目而言 start----------*／
.nav-hqg .nav li a{//假如开发者叫花千骨
padding-top:10px;
}
／*----------针对接手的是中期项目而言 end----------*／
CSS的注释和缩写属性
请大家尽量把注释写全，最好是分模块写注释，假定现在写的是header里面的css样式，请使用
／*----------header start----------*／
这里是书写header css样式
／*----------header end----------*／
单行注释请使用//注释
//这是单行注释
CSS为我们提供了各种缩写属性（如 padding ）应该尽可能使用，使用缩写属性对于代码效率和可读性是有很有用的。
不推荐
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推荐
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
排版规范
这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性。
作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：
结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐
.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}
推荐
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
不推荐
.test {
display: block; height: 100px
}
推荐
.test {
display: block;
height: 100px;
}
属性名的冒号后请使用一个空格。
不推荐
h3 {
font-weight:bold;
}
推荐
h3 {
font-weight: bold;
}
规则之间始终有一个空行（双换行符）分隔。
不推荐
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
其他
- 省略“0px”值后面的px单位。不要在0值后面使用单位，除非有值
- 尽可能使用16进制小写字母表示颜色值，能简写尽量简写，如#000000；可简写为#000；
- 避免使用CSS“hacks“
<a id="js">javascript 的命名空间规范</a>
当开发项目的时候，请尽量将自己的全局变量写在自己函数体内，这样团队合并项目的时候就不会造成重复命名。
不推荐
var i=0;
var j=on-off;
推荐
function project{//将自己的变量定义在自己项目的一个大的函数体内
var i=0;
var j=on-off;
}
定义变量请加上var，不要忽略它，把赋值尽量写在变量申明中，声明变量时尽量都统一写在最前面，这样别人查看你的代码时才会更清晰明了。
不推荐
(function(log){
'use strict';
a = 10; //忽略了var
var b = ;
b=10; //赋值尽量在定义时赋值
for(var i = 0; i < 10; i++) {
var c = a * b * i;
}
function f() {
}
var d = 100; //变量定义尽量放在最前面
var x = function() {
return d * d;
};
log(x());
}(window.console.log));```
**推荐**
(function(log){
'use strict';
var a = 10,
b = 10,
d= 100,
c,
i,
x;
function f() {
}
for(i = 0; i < 10; i++) {
c = a * b * i;
}
x = function() {
return d * d;
};
log(x());
}(window.console.log));}
如果项目的某一个变量是需要多个人调用的，这里建议是定义一个全局的对象global，在这个对象下面在再次定义一个你自己的特有的命名空间，然后在这个空间写入你需要传入的公用的变量，假如我现在是在写home页面的网页，需要公用一个page的变量，那就可以这样写
var page=1;
global.home.page=page;
由于每个人的命名空间都是不一样的，所以即使有多个page变量，也不会相互影响，如
/----------这是首页 start----------／
function home(){
var page=1;
global.home.page=page;
}
/----------这是首页 end----------／
/----------产品页面 start----------／
function product(){
var page=1;
global.product.page=page;
}
/----------产品页面 end----------／
**那这个global函数怎么写呢，这里已经为大家写好了，大家放在自己的js文件中就好了**
/----------全局命名空间函数定义 start----------/
var global={};
global.register=function(namespase,obj){
var nsArray=namespase.split('.');
var regns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
_parent[n]={};
}
if(nsArray.length==0){
if(obj){_parent[n]=obj;}
return _parent[n];
}
return regns(_parent[n]);
};
return regns(parent);
};
/----------全局命名空间函数定义 end----------/
/----------获取空间里变量的值 start----------/
//获取命名空间
global.obtain=function(namespase){
var nsArray=namespase.split('.');
var getns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
console.log('命名空间'+namespase+'不存在！');
}
else if(nsArray.length>0){
return getns(_parent[n]);
}
else{
return _parent[n];
}
};
return getns(window);
};
/----------获取空间里变量的值 end----------/
###使用方法
**假如现在我在写一个login页面，需要把temp变量传给register页面，我们可以这样写**
function login(){
var temp="off";
global.register ("login.temp","temp")//将temp变量传给
g lobal.login.temp;
}
function register(){
var temp=global.obtain("login.temp");//相当于把global.login.temp传给temp变量
}
####其他
>- 如果可以，尽量使用总是使用 === 精确的比较操作符
- 不要忘记每行代码结束后的分号
- 使用if else时记得还有三元条件判断（如果三元条件判断相对简洁的话）
- 注释请使用具有模块化的注释如：
/----------功能 start----------/
这里是代码
/----------功能 end----------/
- 单行注释请使用//注释
本人也刚开始学前端，有错误的地方望您能指出，您有更好的建议我也会虚心学习
申明：文中内容有参考网上部分资料，如有侵权，望联系本人，谢谢