前端代码风格规范总结

时间 2019-11-06

标签前端代码风格规范总结繁體版

原文原文链接

本文转载于:猿2048网站➞前端代码风格规范总结javascript

规范目的：为了提升工做效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。php

规范基本准则：符合web标准，使用具备语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽量的减小服务器的负载，保证最快的解析速度。css

1、文件规范html

1.1 HTML部分前端

　　1.1.1 建包问题java

　　　　文件均归档至约定的目录中，建包格式以下：web

　　　　注意：全部的css文件放在css文件夹中，image放在images文件夹中，js放在js文件夹中chrome

　　1.1.2 HTML头部编写express

　　　　(1) 编码：全部编码均采用xhtml/html，标签必须闭合，编码统一为UTF-8，在多语言的网站建议添加<html lang="zh-CN">，说明内容是以中文显示和阅读为基础的浏览器

　　　　(2) 语义化：正确使用标签，充分利用无兼容性问题的html自身标签

　　　　(3) 文件头部head内容：

　　　　　　• title: 须要添加标题

　　　　　　• 编码: charset=UTF-8

　　　　　　• meta: 能够添加description、keywords内容

1.2 CSS部分

　　1.2.1 CSS种类及其命名

　　　　能够将CSS样式表分为三类：全局样式表、模块通用样式表和独立样式表

　　　　　　• 全局样式表经常使用命名：public.css

　　　　　　• 模块通用样式表命名：模块名_basic.css

　　　　　　• 独立样式表：模块名_页面名.css

　　1.2.2 CSS引入

　　　　CSS文件引入可经过外联或者内联方式引入

　　• 外联方式

　　• 内联方式

　　　　注意：link和style标签都应该放入head中，原则上，不容许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。

2、注释规范

2.1 顶部文档注释（推荐使用）

1 /*
2 * @description: 中文说明
3 * @author: name
4 * @update: name(xxxx-xx-xx xx:xx)
5 */

2.2 属性注释

1 /*Header*/
2 /*Nav*/
3 /*Container*/
4 ...
5 /*Footer*/

2.3 功能模块注释

1 /* module: module1 by 小王 */
2 ...
3 /* module: module2 by 小李 */

2.4 特殊注释

1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默认宽度为1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

　　注意：

　　　　• 每个文档对应一个文档注释（主要注释内容包括：文档建立人、建立时间、主要内容描述等）

　　　　• 属性注释说明：能够分CSS属性来进行命名（如：margin/padding值、CSS Hack、全局Hover等）

　　　　• 功能模块注释说明：分模块来编写CSS样式（如：头部、导航、按钮、页脚等等）

3、命名规范

3.1 如何命名

　　• css最好用class来命名，js用id来命名，已作区分

　　• id和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名

3.2 命名示例

.div1{} /* 不推荐；无心义 */
.a_green{} /* 不推荐；无心义 */
.menu{} /* 推荐；特殊性*/
.header{} /* 推荐；通用性*/

3.3 命名精简

　　id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提升代码效率

.navigation{} /* 不推荐 */
.login_box_inside_con{} /* 不推荐 */
.nav{} /* 推荐 */

3.4 命名嵌套问题

　　书写css要注意前后顺序和嵌套问题，从性能上考虑尽可能减小选择器的层级

.nav ul.list{} /* 不推荐 */
.nav .list{} /* 推荐 */

3.5 注意事项

规则命名中，一概采用小写加下划线的方式
命名中尽可能避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
命名注意缩写，可是不能盲目缩写
不容许经过一、二、3等序号进行命名
避免class与id重名
id注意用于标识模块或页面的某一个父容器区域，名称必须惟一，不要随意新建id
class用于标识某一个类型的对象，命名必须言简意赅
尽量提升代码模块的复用，样式尽可能用组合的方式
规则名称中不该该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称

4、书写规范

4.1 排版规范

使用4tab来缩进
规则能够写成单行。或者多行，可是整个文件内的规则排版必须统一

　　书写风格：

每个属性值必须添加分号
若是多个属性公用一个样式集，则多个属性必须写成多行形式

4.2 属性编写顺序（通常遵循显示属性 -> 自身属性 -> 文本属性 -> 其余属性的书写格式）

显示属性：display/list-style/position/float/clear...
自身属性（盒模型）：width/height/margin/padding/border
背景：background
行高：line-height
文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
其余：cursor/z-index/zoom/overflow...
CSS3属性：transform/transition/animation/box-shadow/border-radius
若是使用CSS3的属性，若是有必要加入浏览器前缀，则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加，标准属性写在最后
连接的样式请严格按照以下顺序添加：a:link -> a:visited -> a:hover -> a:active

4.3 代码性能优化

合并margin、padding、border的-top/-right/-bottom/-left的设置，尽可能使用短名称
选择器应该在知足功能的基础上尽可能简短，减小选择器嵌套，查询消耗。可是必定要避免覆盖全局样式设置
禁止在css中使用*选择符
0后面不须要单独，好比0px能够省略成0，0.8px能够省略成.8px
若是能够颜色尽可能用三位字符表示，好比#ccc
若是没有边框时，不要写成border:0;应该写成border:none
在保存代码解耦的前提下，尽可能合并重复的样式
background、font等能够缩写的属性，尽可能使用缩写形式
能以背景形式呈现的图片，尽可能都写入CSS样式中

4.4 CSS Hack的使用

　　尽可能少使用浏览器检测和CSS Hacks，先试试别的解决办法。考虑到代码高效率和易管理，虽然这两种办法能快速解决浏览器解析差别，但应被视为最后的手段。在长期的项目中，容许使用hack只会带来更多的hack，因此尽可能少用

IE6: _property:value
IE6/7: *property:value
IE6/7/8/9: property:value\9

4.5 IE兼容性

　　IE支持经过特定的<meta>标签来肯定绘制当前页面所应该采用的IE版本，除非有强烈的特殊需求，不然最好是设置edge mode，从而通知IE采用其所支持的最新的模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　注意：X-UA-Compatible这个是IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

　　　　 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">中的chrome=1效果是若是安装了GCF，则使用GCF来渲染页面，若是未安装GCF，则使用最高版本的IE内核进行渲染

4.6 字体规则

为了防止文件合并及编码转换时形成问题，建议将样式中文字体名字改为对应的英文名字，如：黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)
字体粗细采用具体数值，粗体bold写成700，正常normal写成400
font-size必须以px为单位
为了对font-family取值进行统一，更好的支持各个操做系统上各个浏览器的兼容性，font-family不容许在业务代码中随意设置

5、其余规范

不要轻易改动全站级CSS和通用CSS库，改动后，要通过全面测试
避免使用filter
避免在CSS中使用expression
避免太小的背景图片平铺
尽可能不要在CSS中使用!important
绝对不要在CSS中使用"*"选择符
层级(z-index)必须清晰明确，页面弹窗、气泡为最高级(最高级为999)，不一样弹窗气泡之间可在三位数之间调整，普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增长，禁止层级间盲目攀比
背景图片在状况容许，尽量使用sprite技术，减少http请求，考虑到多人协做开发，sprite按照模块、业务、页面来划分
页面内部尽可能避免使用style属性，CSS放在head标签中，由link标签引入，使页面的结构与表现分离
尽可能减小使用float、position等影响性能的属性，这样能够避免新手在布局时出现的混乱
尽可能少使用<br />来断行
不要连续出现多个 (空格)，也尽可能少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽可能使用text-indent、maring/padding等方法来实现
排版若是遇到须要首行缩进的处理，可使用text-indent:2em;
图片若是须要加载就在页面上用img标签写出，并指明宽高，重要的图片必须加上alt属性，给重要的元素和截断的元素上加上title
若是有跳转的地方，统一使用a标签，<a href="#"></a>，须要跳转到新页面，则还须要加上targent="_blank"属性，若是点击的是空连接(#)，则会自动将当前页面重置到首端，可使用"javascript:void()"来替代原来的"#"
分清楚什么状况下jpg/gif/png图片

6、自适应页面布局（响应式布局，暂不考虑低版本IE兼容性）

6.1 布局细节

首先头部head中加入meta新标签

<meta name="viewport" content="width=device-width, initial-scale=1">

position：不能使用绝对定位
width/height/margin/padding: 不能使用px，应该使用百分比、auto或em
font: 不能使用绝对大小，应使用em

6.2 CSS3引入的Media Query模块，可自动探测屏幕宽度

加载相应的CSS文件，建议根据不一样的屏幕分辨率，选择应用不一样的CSS规则，如：@media screen and (max-width:799px) {...}
图片自适应：img{max-width:100%;}

7、帮助文档

7.1 全局样式写法（reset css）

7.2 清浮动

　　须要清除浮动的地方有：

若子元素浮动，而父元素内容塌陷（也就是没有包住）
布局出现混乱，譬以下一层的跑到上一层去了

　　解决办法（四种方法）

给父元素一样适用浮动，保证子元素与父元素浮动后仍是在同一层
正确使用overflow:hidden;总所周知，overflow:hidden主要意思是溢出隐藏的意思，可是一样有清浮动的效果
在须要的元素下面添加<div class="clear"></div>，CSS中：clear{clear:both;}（不推荐，增长代码，冗余）
使用clearfix来清除浮动（推荐），至关于建立一个隐形的内容为空的块的目标元素来清除浮动

　　　　.clearfix{*zoom:1;} /* 针对IE7 hack，触发IE7的haslayout，以清除浮动 */
　　　　.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
　　　　.clearfix:after{clear:both;}

7.3 各大网站的字体样式：

Google: font-family:arial, sans-serif;
Yahoo: font:13px/1.25 "Helvetica Neue",Helvetica,Arial;
Apple: font:12px/18px "Lucida Grande", "Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
Baidu: font:12px arial;
taobao: font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
Weibo: font:12px/1.125 Arial,Helvetica,sans-serif;
Tencent: font:12px "宋体","Arial Narrow",HELVETICA;
Sina Weibo: font:12px/1.3 "Arial","Microsoft YaHei";
Sina: font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;
JD: font:12px/150% Arial,Verdana,"宋体";
zhihu: font-family:'Helvetica Neue', Helvetiva,Arial,Sans-serif;

　　默认字体样式：

兼容性好：font-family:Helvetica,Tahoma,Arial,Sans-serif;
更接近设计：font-family:Geogia,"Times New Roman",Times,serif;

7.4 文本多行显示添加省略号（文本溢出省略）

　　给须要的标签添加具体宽度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

7.5 input框的具体样式

　　input框行高问题，通常不须要写line-height，可是在IE8/IE7须要写hack