一次完整打包：工程師最需要的前端開發指南大補帖_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，未經授權請勿使用。）
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
上一篇： 原生js拖拽(第一课 未兼容)拖拽思路_javascript技巧
下一篇： 用css 制作三角