GitHub 上一份很受欢迎的前端代码优化指南-强烈推荐收藏 - yonghu86_H5之家

　　看到一份很受欢迎的，根据自己的理解进行了翻译，但能力有限，对一些JS代码理解不了，如有错误，望斧正。

HTML 语义化标签

HTML5 提供了很多语义化元素，更好地帮助描述内容。希望你能从这些丰富的标签库中受益。

<div> <div> <div> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div>  <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>

请确保正确使用语义化的标签，错误的用法甚至不如保守的用法。

<h1> <figure> <img alt=Company src=logo.png> </figure> </h1>  <h1> <img alt=Company src=logo.png> </h1>

简洁

确保代码简洁性，不要再采用XHTML的旧做法。

<!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html>  <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>

可用性

可用性不应该是事后才考虑的事情。你不必成为WCAG专家来改进网站，你可以通过简单的修改做出不错的效果，例如；

<h1><img alt="Logo" src="logo.png"></h1>  <h1><img alt="My Company, Inc." src="logo.png"></h1>

语言

定义语言和字符编码是可选项，建议在文档级别处定义。使用UTF-8编码。

<!doctype html> <title>Hello, world.</title>  <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>

性能

除非有非要在加载内容前加载脚本的必要性由，不然别这样做，这样会阻碍网页渲染。如果你的样式表很大，必须独立放到一个文件里。两次HTTP 请求不会显著降低性能。

<!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p>  <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>

CSS 分号

不能漏写分号

/* bad */ div { color: red } /* good */ div { color: red; }

盒模型

整个文档的盒模型应该要相同，最好使用global * { box-sizing: border-box; }定义。不要修改某个元素的盒模型。

/* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; }

流

尽量不要改变元素默认行为。保持默认的文本流。比如，移出一个图片下面的一个白块，不影响原本的显示：

/* bad */ img { display: block; } /* good */ img { vertical-align: middle; }

类似的，尽量不要改变浮动方式。

/* bad */ div { width: 100px; position: absolute; right: 0; } /* good */ div { width: 100px; margin-left: auto; }

定位

有很多CSS定位方法，尽量避免使用以下方法，根据性能排序：

display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed;

选择器

紧密耦合DOM选择器，三个层级以上建议加class：

/* bad */ div:first-of-type :last-child > p ~ * /* good */ div:first-of-type .info

避免不必要的写法：

/* bad */ img[src$=svg], ul > li:first-child { opacity: 0; } /* good */ [src$=svg], ul > :first-child { opacity: 0; }

指明

不要让代码难于重写，让选择器更精确，减少ID、避免使用!important

/* bad */ .bar { color: green !important; } .foo { color: red; } /* good */ .foo.bar { color: green; } .foo { color: red; }

覆盖

覆盖样式会使维护和调试更困难，所以要尽量避免。

/* bad */ li { visibility: hidden; } li:first-child { visibility: visible; } /* good */ li + li { visibility: hidden; }

继承

不要把可继承的样式重复声明：

/* bad */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* good */ div { text-shadow: 0 1px 0 #fff; }

简洁

保持代码的简洁。使用属性缩写。不必要的值不用写。