英语是渣渣，想学英语，又不想花钱报培训班。看不懂的文章，还是翻译一下留着自己看吧。
引自 ： https://github.com/bendc/frontend-guidelines
HTML
语义
HTML5提供了语义元素的目的是精确描述的内容很多。确保你的词汇丰富的效益。
Blog post
Published: 21st Feb, 2015
…
Blog post
Published:
…
确保你了解你所使用的元素的语义。更糟糕的是在一个错误的方式使用语义元素比保持中立。
简洁
保持代码的简洁。忘记你的旧的XHTML的习惯。
Contact Contact me
Contact Contact me
可访问性
可访问性不应该是一个事后的想法。你不一定作为一名 WCAG 专家来优化您的网站，你可以立即开始通过修复小事带来巨大的改变。例如：
1适当的学习使用alt属性
2确保你的链接和按钮标志等这样标记的（不是＜div class=”按钮>暴行）
3不专门依赖于颜色来传达信息
4明确标记的表单控件
语言
在定义语言和字符编码是可选的，它的建议总是声明在文档级别的，即使他们在你指定的HTTP头。支持UTF-8字符编码的任何其他。
Hello, world. Hello, world.
性能
除非有一个正当的理由需要在你的内容之前加载脚本，否则不要阻止你的网页的渲染。如果你的样式表内容比较多，就需要在开始的时候延迟加载，在一个单独的样式表里第二次声明加载。两次HTTP请求有一个明显的加载缓慢，但速度感知是最重要的因素。
Hello, world. ...
Hello, world. ...
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紧密耦合。
/* 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;}
个人翻译水平实在太渣，有问题希望有大神来指点出来，跪谢。。。