前端的指导方针---css篇
英语是渣渣，想学英语，又不想花钱报培训班。看不懂的文章，还是翻译一下留着自己看吧。
引自 ： 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=you@email.com 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=you@email.com 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紧密耦合。
/* 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; }
个人翻译水平实在太渣，有问题希望有大神来指点出来，跪谢。。。
