前端的指導方針---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;
}

我的翻譯水平實在太渣，有問題但願有大神來指點出來，跪謝。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。