作为开发团队不可或缺的一部分，必须根据相关规定合理编写Web前端（某些不良习惯可能会给您自己和他人造成不必要的麻烦）。 不同的公司和不同的团队具有不同的规格和文档。 以下是根据不同公司和团队要求的全面详细的整理结果。 备注：请按照我公司的规格进行实际开发。
A。 基本原则
符合网络标准（UTF-8，HTML5），语义html（HTML5的新要求，减少了对非特定语义标签（例如div和span）的使用）， 分离结构性能和行为（HTML-CSS-JS代码分离，不同行为代码的高内聚性和低耦合），兼容出色的性能（与浏览器的早期版本兼容，与移动和PC设备兼容）。 在页面性能方面（减少请求数量，例如使用Sprite图形和Sass语法），代码要求简明，清晰且井井有条，并且尽可能减少了服务器负载。 确保最快的分辨率速度（减少重涂和重排）。
B。 文件命名约定
1，html，css，js，lib，图像文件全部存储在项目目录中。 如果使用相关的前端框架，请根据框架的文件格式进行合理的布局。
2。 所有文件夹和文件均使用英文名称（避免使用中文路径）。
3，html文件：使用index.html作为入口文件。 如果存在相应的设计组设计手稿，则相应的设计手稿和html文件必须命名一致并合理存储。
4，css文件命名：后缀.css。 常规的initial.css，初始base.css，主页index.css和其他页面是根据相应的html命名的。
5。 js文件命名：英文名称，后缀.js。 普通common.js，初始Base.js。 其他页面根据相应的html命名。
C.HTML规范
1。 文档类型声明和编码：统一为html5声明类型。 编写时，请使用IDE来实现分层缩进（默认缩进为4个空格）。
2，在非特殊情况下，CSS文件位于正文部分中标记之后。 在非特殊情况下，大多数JS文件都放在标记的末尾（如果可以在未加载接口之前执行的代码可以放在head标记之后），以避免内联JS和CSS代码。
3。 所有编码都必须遵循html（XML）标准，标签和属性以及属性名称必须由小写字母和下划线组成，并且所有标签都必须关闭，包括br（），hr（）等。对属性使用双引号 价值观。
4。 导入JS库文件。 文件名必须包含库名和版本号，以及是否为压缩版本，例如jquery-1.4.1.min.js。 导入插件，文件名格式为库名+插件名，如jQuery.bootstrap.js。
5。 在编写页面的过程中，请考虑向后扩展。 有关class＆id，请参阅CSS编写规范。
6。 当您需要向html元素添加自定义属性时，必须首先考虑是否存在默认的现有合适标签来设置，如果没有，则可以使用“ data-”作为添加自定义属性的前缀，避免使用“ data：” 和其他命名方法。
7。 例如，语义html使用h *表示基于重要性的标题（同一页上只能有一个h1），使用p表示段落标记，使用ul表示列表，而不是内联元素嵌套的块级元素。
8。 尽可能减少div的多层嵌套。
9。 编写链接地址时，必须避免重定向，例如：href =“ http://myVue.com/”，即，必须在URL地址后添加“ /”；
10。 尝试避免在页面中使用style属性，即style =“ ...”。
11。 必须为包含描述性表单的表单元素（输入，文本区域）添加标签，例如name：必须写为：name：
12，可以在 形式的背景，请尝试以CSS样式编写它们。
13。 重要图片必须添加alt属性。 为重要元素和截断的元素添加标题。
14。 在块代码和重要功能（例如循环）中添加注释，以利于在后台添加功能。
15。 特殊符号的使用：尽可能使用代码替换：如）＆space（）＆»（»）等。
D.CSS规范
1，编码规范为utf-8。
2。 合作开发和分工：根据每个模块，同时，按照页面的类似程序，预先编写车身框架文件并分配给前端人员，以实现内部结构和性能 和行为。 共享的css文件base.css由i编写。 在协作开发过程中，必须导入每个页面。 此文件包含重置和头部底部的样式。 该文件不能随意修改。
3。 class和id的使用：id是唯一的，并且是父级，class可以重复并且是子级，因此id仅用于大型模块中，Class可以用于高复用率和子级别。 原则上，当我分发框架文件时，将为id命名，但保留给JS的钩子除外。
4，是J保留挂钩的名称，请以js_开头，例如：js_hide，js_show。
5。 类和ID的命名：大框架名称（例如header / footer / wrapper / left / right）在2中由i统一命名。其他样式名称以小写英文＆Number＆命名，例如i_comment，fontred，width200。 避免使用中文拼音，并尝试使用简单的单词组合。 简而言之，命名应在语义上简洁。
6。 避免使用类和ID命名（这很重要，如果您不了解，请及时与i交流）：a）避免使用下级的编写规则，有关示例，请参阅d。 b）命名父元素id / class命名部分，有关示例，请参见d。 c）对于重复率很高的名称，请以您自己的代码和下划线开头，例如i_clear。 d）a和b的两项适用于在2中陷害的页面。例如，要将新的div元素添加到在2中陷害的页面的代码，请遵循以下命名规则：.. 。，样式写法：＃mainnav.firstnav {.......}根据b命名规则：...，样式写法：.main_firstnav {.......}
7. css属性的写入顺序，建议遵循：布局定位属性->自己的属性->文本属性->其他属性。 可以根据您自己的习惯写这篇文章，但是请尝试确保将相似的属性写在一起。 属性列表：布局定位属性主要包括：显示和列表样式和位置（对应的顶部，右侧，底部，左侧）和float＆clear＆visibility＆overflow；
自己的属性主要包括：width＆height＆margin＆padding＆border＆background。
文本属性主要包括：color＆font＆text-decoration＆text-align＆vertical-align＆white-space＆
other＆content。
8。在编写代码之前，
10。样式表中的中文字体名称必须转码为unicode。
11。请尽可能将sprite技术用于背景图片，以减少http请求。考虑到多人协作的发展，sprite图片
11。/ p>
12。使用表格标签时（请避免使用表格标签），请不要使用宽度 / height / cellspacing / cellpadding和其他表属性直接定义性能，并尽可能使用表自身的私有属性分隔结构和性能，例如thead，tr，th，td，tbody，tfoot，colgroup，sc 哦 （cellspaing和cellpadding的css控制方法：table {border：0.margin：0.border-collapse：collapse。} tableth，Tabletd {padding：0。}，我将在base.css文件中初始化表格样式）< / p>
13。 不要使用兼容的ie8。
14。 将png图片用作图片时，图片格式必须为png-8。 如果png-8确实影响图像质量或具有半透明效果，请分别为ie6定义背景：_background：none。 _filter：程序：DXImageTransform .Microsoft.AlphaImageLoader（sizingMethod = crop，src ='img / bg.png'）。
15。 避免使用兼容性属性，例如与text-shadow || css3相关的属性。
16。 减少使用会影响性能的属性，例如position：absolute || float。
17。 必须为大块样式添加注释，为小块样式添加适当的注释。
E。 JS编写标准
1。 文件编码统一为utf-8。 编写过程之后，每一行代码必须以分号结尾。 原则上，所有功能最初都是根据XXX项目的要求开发的，以避免因Internet上的代码不足（冗余代码||与现有代码|| ...冲突）而导致代码污染。
2。 库介绍：原则上仅介绍jQuery库。 如果需要引入第三方库，则必须与团队的其他成员讨论该决定。
3。 变量命名：驼峰式命名。 本地JS变量要求使用纯英文字母，并且首字母必须小写，例如myVue。 jQuery变量要求第一个字符为'_'，其他规则与本机JS相同，例如_myVue。 另外，必须集中声明变量以避免全局变量。
4。 班级命名：大写第一个字母，并以驼峰式命名。 例如MyVue。
5。 函数命名：命名第一个字母和小写的驼峰式大小写。 如myVue（）。
6。 语义命名，并尽可能使用英语单词或它们的缩写。
7。 尝试避免使用兼容且消耗资源的方法或属性，例如eval_r（）＆innerText。
8。 在以后的优化中，必须将JS非注释汉字转换为unicode编码用于避免编码错误时显示乱码。
9。 代码结构清晰，添加适当的注释。 提高功能重用率。
10。 注意与html分开，减少回流，并专注于浏览器性能。
F。 图片规格
1。 所有页面元素图片都放置在img文件夹中，而测试图片则放置在demo文件夹中。
2，图片格式gif / png / jpg。 建议使用webp文件格式，并使用软件进行图像压缩。
3。 请使用小写英文字母||数字|| _的组合命名，但不能包含中文字符||空格||特殊字符； 尝试使用易于理解的词汇来促进团队其他成员的理解。 此外，名称分为两部分，各部分之间用下划线分隔，例如ad_left01.gif || btn_submit.gif。
4。 选择最小的图像格式和图像质量，同时确保视觉效果以减少加载时间。 5.尽量避免使用半透明的png图像（如果使用它们，请参阅CSS规范的相关说明）。
6。 使用css sprite map技术集中较小的背景图像或图标以减少页面http请求，但请注意，必须在相应的sprite map psd源图像中绘制参考线，并将其保存到img目录
返回列表