英语是渣渣，想学英语，又不想花钱报培训班。看不懂的文章，还是翻译一下留着自己看吧。
引自 ： https://github.com/bendc/frontend-guidelines
HTML
语义
HTML5提供了语义元素的目的是精确描述的内容很多。确保你的词汇丰富的效益。
<!-- bad -->
<div id="main">
<div class="article">
<div class="header">
<h1>Blog post</h1>
<p>Published: <span>21st Feb, 2015</span></p>
</div>
<p>…</p>
</div>
</div>
<!-- good -->
<main>
<article>
<header>
<h1>Blog post</h1>
<p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
</header>
<p>…</p>
</article>
</main>
确保你了解你所使用的元素的语义。更糟糕的是在一个错误的方式使用语义元素比保持中立。
<!-- bad -->
<h1>
<figure>
<img alt=Company src=logo.png>
</figure>
</h1>
<!-- good -->
<h1>
<img alt=Company src=logo.png>
</h1>
简洁
保持代码的简洁。忘记你的旧的XHTML的习惯。
<!-- bad -->
<!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[email protected] required=required />
</label>
<script src=main.js type=text/javascript></script>
</body>
</html>
<!-- good -->
<!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[email protected] required>
</label>
<script src=main.js></script>
</html>
（head，body标签都省略掉）
可访问性
可访问性不应该是一个事后的想法。你不一定作为一名 WCAG 专家来优化您的网站，你可以立即开始通过修复小事带来巨大的改变。
例如：
1适当的学习使用alt属性
2确保你的链接和按钮标志等这样标记的（不是＜div class=”按钮>暴行）
3不专门依赖于颜色来传达信息
4明确标记的表单控件
<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1>
语言
在定义语言和字符编码是可选的，它的建议总是声明在文档级别的，即使他们在你指定的HTTP头。支持UTF-8字符编码的任何其他。
<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>
性能
除非有一个正当的理由需要在你的内容之前加载脚本，否则不要阻止你的网页的渲染。如果你的样式表内容比较多，就需要在开始的时候延迟加载，在一个单独的样式表里第二次声明加载。两次HTTP请求有一个明显的加载缓慢，但速度感知是最重要的因素。
<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good--> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>
CSS
分号
虽然从技术上说是CSS分号分隔，始终把它作为一个终结者。
/* bad */
div {
color: red
}
/* good */
div {
color: red;
}
盒模型
盒模型在理想的情况下应该跟整个文档是相同的。通配符* {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紧密耦合。
当你的选择器超过3个伪类选择器，后代或兄弟选择器的时候， 在你想要匹配的元素上添加一个类选择器。
（那么复杂的翻译真是够了，这句话意思是不要滥用后代、兄弟选择器。超过3个选择器的时候不如考虑给元素加CLASS标签。）
/* bad */ div:first-of-type :last-chid > 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;
}
简洁
保持代码的简洁。使用速记属性，避免使用多个属性时。
/* bad */
div {
transition: all 1s;
top: 50%;
margin-top: -10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
/* good */
div {
transition: 1s;
top: calc(50% - 10px);
padding: 5px 10px 20px;
}
语言
多使用英语而不是数学语言
/* bad */
:nth-child(2n + 1) {
transform: rotate(360deg);
}
/* good */
:nth-child(odd) {
transform: rotate(1turn);
}
浏览器私有前缀
积极地干掉过时的浏览器私有前缀前缀，如果需要使用，就在标准属性之前插入。
/* bad */
div {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}
/* good */
div {
-webkit-transform: scale(2);
transform: scale(2);
transition: 1s;
}
动画
避免不透明度和变换的属性进行动画处理。
/* bad */
div:hover {
animation: move 1s forwards;
}
@keyframes move {
100% {
margin-left: 100px;
}
}
/* good */
div:hover {
transition: 1s;
transform: translateX(100px);
}
单位
当你可以用没有单位的值。如果你使用相对单位选择rem。喜欢秒超过毫秒。
/* bad */
div {
margin: 0px;
font-size: .9em;
line-height: 22px;
transition: 500ms;
}
/* good */
div {
margin: 0;
font-size: .9rem;
line-height: 1.5;
transition: .5s;
}
颜色
如果需要使用透明的颜色，就用rgba，否则，就使用十六进制格式。
/* bad */
div {
color: hsl(103, 54%, 43%);
}
/* good */
div {
color: #5a3;
}
制图
当资源可以用css实现的时候，避免http请求。
/* bad */
div::before {
content: url(white-circle.svg);
}
/* good */
div::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
Hacks
不使用
/* bad */
div {
// position: relative;
transform: translateZ(0);
}
/* good */
div {
/* position: relative; */
will-change: transform;
}
个人翻译水平实在太渣，有问题希望有大神来指点出来，跪谢。。。