前端的指导方针---css篇

时间 2019-11-12

标签前端指导方针 css 栏目 CSS 繁體版

原文原文链接

英语是渣渣，想学英语，又不想花钱报培训班。看不懂的文章，仍是翻译一下留着本身看吧。javascript

引自： https://github.com/bendc/frontend-guidelinescss

HTML

语义

HTML5提供了语义元素的目的是精确描述的内容不少。确保你的词汇丰富的效益。 html

<!-- 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>

确保你了解你所使用的元素的语义。更糟糕的是在一个错误的方式使用语义元素比保持中立。java

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

<!-- good -->
<h1>
  <img alt=Company src=logo.png>
</h1>

简洁

保持代码的简洁。忘记你的旧的XHTML的习惯。git

<!-- 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标签都省略掉）github

可访问性

可访问性不该该是一个过后的想法。你不必定做为一名 WCAG 专家来优化您的网站，你能够当即开始经过修复小事带来巨大的改变。
例如：
web

1适当的学习使用alt属性浏览器

2确保你的连接和按钮标志等这样标记的（不是＜div class=”按钮>暴行）frontend

3不专门依赖于颜色来传达信息ide

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;
}

我的翻译水平实在太渣，有问题但愿有大神来指点出来，跪谢。。。