HTML-CSS-JS编码规范

时间 2019-11-24

标签 html css 编码规范栏目 HTML 繁體版

原文原文链接

1、HTML代码规范

1.img标签要写alt属性（alt属性：图片没法加载时的提示文字）

<img src = "imgs/btn.png"  alt = "ABC" >
复制代码

2.单标签能够不写闭合标签

<input  type = "text" >
<br>
<img src= "" >
复制代码

3.自定义属性以 data- 开头

<div data-count = "5" ></div>
复制代码

4.td放在tr里面，li放在ol/ul里面（如不标准浏览器可能有本身的解析方式）

<tr>
<td></td>
<td></td>
</tr/>
<ul>
<li></li>
<li></li>
</ul>
复制代码

5.行内元素里不能使用块元素

a标签里嵌套div，可能会致使a标签没法正常点击若是span里面嵌套div，要把span加上display：blockcss

6.每一个页面都写，设置页面渲染模式为标准模式

7.html要保持简洁，不能套不少层

8.style不能写在body里，有可能出现渲染两次，闪屏问题

9.html加lang属性（有利于SEO）

<html lang = "zh-CN" >
复制代码

10.meta标签里要写charset属性,避免网页显示unicode符号时乱码

<head>
    <meta charset = "utf-8" >
</head>
复制代码

11.特殊符号使用html实体

符号实体编码html

© &copy;
¥ &yen;
® &reg;
> &gt;
< &lt;
& &amp;
复制代码

12.img标签空src的问题，a标签空href问题，background-image空url问题

动态给src赋值时，空src会使浏览器认为src是当前页面连接，就会再一次请求页面，解决办法：html5

<img src = "about:blank" alt >
复制代码

这样浏览器会去加载一个空白页面，不会加载当前页面，也不会报错 background-image空url，会报404错误android

13.行内元素换行和空格的影响

<form>
	 <label>Email: </label>
	 <input type = "email" >
</form>
复制代码

在label和input中间有一个空格，可能会致使label的width和input的width二者的和等于form致使input换行，由于块级元素开始会有空白文本注意：注释标签也会建立相应的节点，只是不渲染css3

14.类名使用小写字母加中划线链接

<div class = "btn-icon" ></div>
复制代码

15.使用合适的标签

内容是表格就使用table，table有自适应的优势；若是是一个列表就使用ol/ul标签，扩展性比较好
是输入框就使用input，而不是写一个p标签，而后设置contenteditable=true，由于这个在IOS Safari上光标定位容易出现问题（若是须要作特殊效果除外）
粗体就使用b/strong，而不是本身设置font-weight
表单就使用form标签，注意form里面不能套form
跳链就使用a标签，而不是本身写onclick跳转。a标签里面不能套a标签
使用html5语义化标签，如导航使用nav，侧边栏使用aside，顶部和尾部使用header/footer，页面比较独立的部分可使用article，如用户的评论
若是是按钮就应该写一个button或者<input type="button">，而不是写一个a标签设置样式，由于使用button能够设置disabled，而后使用CSS的:disabled，还有:active等伪类使用，例如在:active的时候设置按钮被按下去的感受
若是是标题就应该使用标题标签h1/h2/h3，而不是本身写一个<p class="title"></p>，相反若是内容不是标题就不要使用标题标签了
在手机上使用select标签，会有原生的下拉控件，手机上原生select的下拉效果体验每每比较好，不论是IOS仍是android，而使用<input type="tel">在手机上会弹一个电话号码的键盘，<input type="number"><input type="email">都会弹相应的键盘
若是是分隔线就使用hr标签，而不是本身写一个border-bottom的样式，使用hr容易进行检查
若是是换行文本就应该使用p标签，而不是写br，由于p标签能够用margin设置行间距，可是若是是长文本的话使用div，由于p标签里面不能有p标签，特别是当数据是后端给的，可能会带有p标签，因此这时容器不能使用p标签

2、CSS编码规范

1.文件名规范

文件名：小写字母加中划线变量名：驼峰命名引入的css能够不写type = "text/css"，可是要写relweb

<link rel = "stylesheet" href = "../common.css"></link>
复制代码

js同上后端

<script src = "test.js"></script>
复制代码

2.属性书写顺序，通常重要的放在最前面

3.不要使用样式特色命名，类的命名应当使用它所表示的逻辑意义，如`company-logo、commit-btn`

4. 选择器的性能，选择器通常不要超过三个

5.使用css3的选择器完成一些高级的功能

6.使用正确的选择器，尽可能不要使用很大的选择器

7.多写注释

8.属性值规范

若是值是0，一般都不用带单位
色值用十六进制，少用rgb
注意border none和0的区别

9.不要设置太大的z-index，一般保持在个位数就能够

10.合并属性

11.注意float/absolute/fixed定位会强制设置成block

12.清除浮动（兼容IE8及以上）

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
复制代码

13.css动画规范

使用transition作动画的时候不要用all全部属性，用哪一个属性就写哪一个属性，Safari- 可能会有奇怪的抖动
使用transform替代position作动画（transition不会重绘）
使用css代替js完成动画

14.图片压缩（tinypng）

15.正确使用background和img

若是是头图等直接展现的图片仍是要img标签，若是是作为背景图就使用background，使用img能够写个alt属性加强SEO
复制代码

16.响应式开发不要杂合使用rem

17.适当使用`:before` `:after`（会在标签后面追加一个标签）

18.少用`absolute`定位（页面的主要布局不能用absolute），能够用`float`

19.移动端提升可点区域范围

20.不要设置input的line-height，在Safari浏览器的输入光标会变大，若是要居中，使用`padding`

21.移动端弹框要禁止body滑动

由于IOS Safari切换输入框的时候会页面会弹闪得很厉害，由于你在切的时候它会先把键盘收起来，而后再弹出来，这个时间很短，给人感受页面弹闪了一下，但若是把body禁止滑动了就不会有这个问题，这有两个解决办法，第一种是把body fixed住，第二种设置body overflow: hidden，相对来讲第二种比较简单一点。IOS10彻底不会闪，IOS9如下仍是会闪
复制代码

22.手动编写渐变的CSS，能够用一个在线工具https://www.cssmatic.com/，生成兼容性很强的css样式

background: rgba(232,228,236,1);
background: -moz-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(232,228,236,1)), color-stop(100%, rgba(202,195,213,1)));
background: -webkit-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -o-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -ms-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: linear-gradient(to right, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e4ec', endColorstr='#cac3d5', GradientType=1 );
复制代码

23.行内元素能够直接设置margin-left/margin-right

3、JS编码规范

1.变量命名

2.生命变量时要赋值

3.函数的返回值类型要肯定

由于常用undefined来判断变量有没有定义，若是要赋值应该要赋空值，如对象赋值为null，数字赋值为0，字符串赋值为空字符，
复制代码

4.不要让代码在全局做用域下运行

5.简洁代码

使用三目运算代替简单的if-else
使用箭头函数代替简单的函数
复制代码