本文共 7056 字，大约阅读时间需要 23 分钟。

编程规范 HTML + CSS

一.命名规范

HTML + CSS 命名规范

1. 命名需要是具备语义性的单词，不能用 数字 拼音   数字,符号开头	正确示范 ： wrap description title  content	错误示范 :  aaaa a1 $we 4tdds2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名  注意: 书写风格必须统一 不容许出现 _ -一起使用的情况  PS: 更推荐使用 - 这样更清晰.	正确示范 :  header-nav content-left slide-bar  	错误示范 :  headernav slideBar ContentLeft3. 命名需要进行适当的缩写, 单词连接层级不要超过4层	正确示范 :  head-tit-ico 	错误示范 :  header-title-left-logo-icon4. 不容许通过1、2、3等序号进行命名	正确示范: content-product	错误示范: content1 			content2另: 1. 避免class与ID重名 2. id用于识别模块或一级结构区域 且必须唯一 不要改动线上项目ID名称

常用命名

二.img 标签四要素,(行内元素,用text-aglin居中,不是margin:0 auto.)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZwupMse-1619715962829)(C:\Users\tuyue\AppData\Local\Temp\1612969513887.png)]
为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
img标签四要素 width height
四要素的width和height只需要写数字 图片的原始宽度和高度 不需要添加单位, 爬虫需要的是原始图片数据
alt不仅是图片替代文本而且起到让搜索引擎蜘蛛了解图片的内容,便于百度图片的收录以及优化。 alt还可以在图片无法加载的时候 显示图片描述文字 让用户了解这个图是做什么的
title不属于四要素 四要素有 src、width、height、alt

正确示范 : <img src='xxx/xxx.png' width='125' height='125' alt='示范'>

错误示范 :  <img src='xxx/xxx.png' width='125px' height='225px'>

三.标签空行

HTML标签内部原则上不容许出现无意义的空行 但如果为源码 可基于保证可读性的原则上 对大块分区之间进行空行或 补充注释说明, 禁止出现连续两行以及以上的空行行为

<div class="header"> ......</div><!-- content start --><div class="content">     </div><div class="footer">     </div>

四.转义符号:

为了避免在多类型HTML标签编辑 查阅 传输中 将符号误认为结构元素或关键字 在使用符号的时候统一用转义符

正确示范 :<p>3&gt;2</p>

错误示范 :<p>3>2</p>

PS:content:属性内的文本,可以不用转移转义符;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lmB1MUDx-1619715962833)(C:\Users\tuyue\AppData\Local\Temp\1612969900879.png)]

五.HTML标签书写与嵌套

合理遵守标签书写与嵌套规则 满足w3c规范的同时避免不必要的兼容问题

1. 所有标签书写必须在半角英文状态下小写输入
2. 双标签必须闭合 单标签不写闭合符 (/)
3. 子级标签相对父级标签进行一次TAB缩进 1tab = 2空格
4. 属性值必须带有引号(单引号 or 双引号) 保证引号风格统一
5. ul>li ol>li dl>dt>dd 是成套 并且为绝对父子关系标签 不容许在ul直接子代中插入非li的标签
6. a标签内部不容许嵌套a标签.(嵌套了就疯了,失效了)
7. 除了a之外的行内元素不容许嵌套块元素.(H5之后热区)
8. p dt h内不能嵌套块元素

六.图片文件命名(img/imgages)

	1. 图片后缀命名一律小写。	2. 使用间隔符 - 进行连接。        一般背景图片以bg-开头，        按钮图片以btn-开头，        图标图片以icon-开头，        聚合精灵图以spr-开头，后跟英文单词，如果名称过长，适当使用缩写

CSS书写

一.CSS字体规范

1. 现在网页中普遍使用字号14px+。 行高一般+8-10px即可
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

二.注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

p {     font-size: 14px;                 /* 所有的字体是14像素大小*/}

①文件顶部注释

/* * @description: xxxxx 中文说明 * @author: zhifu.wang * @update: zhifu.wang (2012-10-17 18:32) */

②模块注释

/* module: module1 by zhifu.wang */ …./* module: module2 by zhifu.wang */模块注释必须单独写在一行

③简单注释

单行注释：/* this is a short comment */单行注释可以单独写在一行，也可以写在行尾多行注释：/* * this is comment line 1. * this is comment line 2.*/多行注释必须写在单独行

④特殊注释(代办,未完成的意思)

用于标注修改、待办等信息/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 *//* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */长度要求注释中的每一行长度丌超过 40 个汉字，或者 80 个英文字符

三.空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例： .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

color: red;

四.选择器规范

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* 规范 */#username input {}.comment .avatar {}/* 不规范 */.page .header .login #username input {}.comment div * {}

【建议】 并集选择器在逗号后换行书写下一个选择器

示例：

/* 规范 */body,ul,p {}/* 不规范 */body, ul, p {}

五.属性规范

【强制】 属性定义必须另起一行。

示例：

/* 规范 */.selector {    margin: 0;    padding: 0;}/* 不规范 */.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* 规范 */.selector {    margin: 0;}/* 不规范 */.selector {    margin: 0}

六.大小写规定

css虽然不区分大小写 按照惯例和规定 : 所有css文件中的代码都小写, 

/* 规范 */#username input {	text-align: center;}/* 不规范 */#username input {	TEXT-ALIGN: center;}

七.CSS内双引号

CSS内所有需要用到引号的部分统一,推荐使用 双引号 (根据公司或者项目组来) 字体数字双引号

content: "."

可以通过escape() 来测试属于什么字体。

八.CSS3兼容前缀

如果使用 CSS3 的属性，如果有必要加入浏览器前缀，则按照

-webkit- / -moz- / -ms- / -o-
的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：

div.animation-demo {     -webkit-animation: mymove 5s infinite;     -moz-animation: mymove 5s infinite;     -o-animation: mymove 5s infinite;     animation: mymove 5s infinite;}

九.背景URL

背景图片 background-image: url() 括号内部地址不使用引号包裹

background-image: url(img/banner.jpg)

十.CSS书写顺序(超级正确,让浏览器渲染正确)

1.良好的CSS书写顺序是前端工程师需要遵守并维护的重要规范

1. 位置属性 如: display position(lrtb) float overflow z-index list-style clear等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性2. 自身属性 如: width height margin padding border background line-height 等可以影响盒子自身展示的属性3. 文本属性  如:color font- text- word- 等作用于文本的样式属性4. 其他与新增属性 如:cursor zoom transform box-shadow 等新增属性

2.原理

1. 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染2. 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘3. 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护

3.错误示范

.selector {       font-size: 12px;    width: 150px;    float: left;}

4.正确示范

.selector {       float: left;    width: 150px;    font-size: 12px;}

十一.链接伪类顺序

链接的样式请严格按照：a:link-> a:visited-> a:hover-> a:active（LoVeHAte）的顺序添加

十二.CSS复合写法与单例写法

如果对目标样式的子属性需求小于3时 进行单例写法 避免复合写法造成的computed浪费当子属性需求 大于等于3时 进行复合式写法 避免单例写法过于冗余和字节浪费PSmargin和padding建议: 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。

错误示范

.selector {   	background: red;    margin-top: 20px;    margin-bottom: 20px;    margin-left: 20px;    margin-right: 20px;}

正确示范

div {   	background-color: red;    margin: 20px;}

十三.布局方式选择

文档流 > 盒子模型距离调整(margin+padding) > 浮动 > 定位

定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。

实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。

十四.定位z-index取值范围

合理规划z-index的取值范围 避免和他人组件层级冲突 需要组内协商

十五.css超级细节优化

适当缩写 合理规划 兼容调整

1. 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px
2. HEX 16进制颜色代码 对 AABBCC格式缩写为 ABC 例: #336688 => #368
3. 如果没有边框时，不要写成border:0，应该写成border:none
4. 为了 SEO 和页面可用性，请使用 text-indent 来隐藏文本内容 .text-indent:-9999px
5. 使用背景图标请使用精灵图(csssprites) 合并图片 制作时颜色相近的放到临近位置
6. 在H5 DTD规则下 省略 script link style 标签的 type属性

| ---------------------- | ----------- |
| banner与二维码等弹出层 | 999 - 1900 |
| 页面公共底部 | 1999 - 2100 |
| 页面公共组件 | -1 - 999 |

十五.css超级细节优化

适当缩写 合理规划 兼容调整

1. 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px
2. HEX 16进制颜色代码 对 AABBCC格式缩写为 ABC 例: #336688 => #368
3. 如果没有边框时，不要写成border:0，应该写成border:none
4. 为了 SEO 和页面可用性，请使用 text-indent 来隐藏文本内容 .text-indent:-9999px
5. 使用背景图标请使用精灵图(csssprites) 合并图片 制作时颜色相近的放到临近位置
6. 在H5 DTD规则下 省略 script link style 标签的 type属性