前端的指导方针---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:;

}

/* 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:;

}

/* good */

[src$=svg], ul > :first-child {

  opacity:;

}

不要让值和选择器硬覆盖。减少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:;

  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;

}

个人翻译水平实在太渣，有问题希望有大神来指点出来，跪谢。。。