一次完整打包：工程師最需要的前端開發指南大補帖_html/css_WEB-ITnose

• HTML

語義

HTML5 為我們提供了很多旨在精確描述內容的語義元素。確保你可以從它豐富的詞彙中獲益。

你需要理解你正在使用的元素的語義。用一種錯誤的方式使用語義元素比保持中立更糟糕。

簡潔

保持代碼的簡潔。忘記原來的 XHTML 習慣。

可訪問性

可訪問性不應該是以後再想的事情。提高網站不需要你成為一個 WCAG 專家，你完全可以通過修復一些小問題，從而造成一個巨大的變化，例如：

1. 學習正確使用 alt 屬性

2. 確保連結和按鈕被同樣地標記（不允許

）

3. 不專門依靠顏色來傳遞資訊

4. 明確標注表單控制項

語言

當定義語言和字元編碼是可選擇的時候，總是建議在文檔級別同時聲明，即使它們在你的 HTTP 標頭已經詳細說明。比任何其他字元編碼更偏愛 UTF-8。

性能

除非有正當理由才能在內容前載入腳本，不要阻塞頁面的渲染。如果你的樣式表很重，開頭就孤立那些絕對需要得樣式，並在一個單獨的樣式表中推遲二次聲明的載入。兩個 HTTP 請求顯然比一個慢，但是感知速度是最重要的因素。

• CSS

分號

雖然分號在技術上是 CSS 一個分隔符號，但應該始終把它作為一個結束字元。

• 盒子模型

盒子模型對於整個文檔而言最好是相同的。全域性的 * { box-sizing: border-box; }就非常不錯，但是不要改變預設盒子模型的特定元素，如果可以避免的話。

• 流

不要更改元素的預設行為，如果可以避免的話。元素盡可能地保持在自然的文檔流中。例如，刪除圖像下方的空格而不改變其預設顯示：

同樣，如果可以避免的話，不要關閉元素流。

定位

在 CSS 中有許多定位元素的方法，但應該儘量限制以下屬性 / 值。按優先順序排列：

選擇器

最小化緊密耦合到 DOM 的選擇器。當選擇器有多於 3 個結構偽類，後代或兄弟選擇器的時候，考慮添加一個類到你想匹配的元素。

當你不需要的時候避免超載選擇器。

特異性

不要讓值和選擇器難以覆蓋。儘量少用 id，並避免!important。

覆蓋

覆蓋樣式使得選擇器和調試變得困難。如果可能的話，避免覆蓋樣式。

繼承

不要重複可以繼承的樣式聲明。

簡潔

保持代碼的簡潔。使用簡寫屬性，沒有必要的話，要避免使用多個屬性。

語言

英語表達優於數學公式。

瀏覽器引擎首碼

果斷地刪除過時的瀏覽器引擎首碼。如果需要使用的話，可以在標準屬性前插入它們。

動畫

視圖轉換優於動畫。除了 opacity 和 transform，避免動畫其他屬性。

單位

可以的話，使用無單位的值。如果使用相對單位，那就用 rem 。秒優於毫秒。

顏色

如果你需要透明度，使用 rgba。另外，始終使用十六進位格式。

繪畫

當資源很容易用 CSS 複製的時候，避免 HTTP 請求。

Hacks

不要使用 Hacks。

•  JavaScript

性能

可讀性，正確性和可表達性優於性能。JavaScript 基本上永遠不會是你的性能瓶頸。圖像壓縮，網路接入和 DOM 重排來代替優化。如果從本文中你只能記住一個指導原則，那麼毫無疑問就是這一條。

無狀態

儘量保持函數純潔。理論上，所有函數都不會產生副作用，不會使用外部資料，並且會返回新物件，而不是改變現有的對象。

• 本地化

盡可能地依賴本地方法。

強制性

如果強制有意義，那麼就使用隱式強制。否則就應該避免強制。

迴圈

不要使用迴圈，因為它們會強迫你使用可變物件。依靠 array.prototype 方法。

如果不能避免，或使用 array.prototype 方法濫用了，那就使用遞迴。

這裡有一個通用的迴圈功能，可以讓遞迴更容易使用。

參數

忘記 arguments 對象。餘下的參數往往是一個更好的選擇，這是因為：

你可以從它的命名中更好地瞭解函數需要什麼樣的參數

真實陣列，更易於使用。

應用

忘掉 apply()。使用操作符。

綁定

當有更慣用的做法時，就不要用 bind() 。

函數嵌套

沒有必要的話，就不要嵌套函數。

合成函數

避免調用多重嵌套函數。使用合成函數來替代。

緩存

緩存功能測試，大資料結構和任何奢侈的操作。

變數

const 優於 let ，let 優於 var。

條件

IIFE 和 return 語句優於 if， else if，else 和 switch 語句。

對象迭代

如果可以的話，避免 for…in。

map 對象

在物件有合法用例的情況下，map 通常是一個更好，更強大的選擇。

Curry

Curry 雖然功能強大，但對於許多開發人員來說是一個外來的範式。不要濫用，因為其視情況而定的用例相當不尋常。

可讀性

不要用看似聰明的伎倆混淆代碼的意圖。

代碼重用

不要害怕創建小型的，高度可組合的，可重複使用的函數。

依賴性

最小化依賴性。協力廠商是你不知道的代碼。不要只是因為幾個可輕易複製的方法而載入整個庫：

（本文轉載自《 碼農網 》，圖片來源： pbyrne CC Licensed，未經授權請勿使用。）