前端最佳實踐之HTML+CSS 和JS
一些前端的最佳實踐，包括 html,css,javascript
HTML
語義
HTML5為我們提供大量的語義元素的目的就是為了準確地描述內容，確保你受益於其豐富的詞彙。
確保你瞭解你使用的語義元素。錯誤的使用語義元素是很糟糕的。
簡潔
保持程式碼簡潔。忘記你的舊 XHTM L的習慣。
可訪問性
可訪問性不應該是後面再來做的事。但你也不必成為一個WCAG專家來提高你的 網站,你可以立即做一些小事情,就會有巨大的改變,如:
-
學習正確使用“alt”屬性
-
確保你的連結和按鈕等標記(沒有
“< div class = button”這種濫用) -
不完全依賴顏色資訊交流
-
明確
labelinput控制元件
語言編碼
雖然語言和字元編碼的定義是可選的,但還是推薦宣告在文件級別,即使他們HTTP頭中指定。在任何支援utf - 8 字元編碼裡建議宣告 utf-8 編碼
效能
除非有一個充分的理由不然在載入指令碼內容之前不要阻止呈現的頁面。
CSS
分號在技術上是一個分離器,總是把它當作結束符。
盒模型
盒子模型應該為整個文件是一樣的。一個全域性 “* { box-sizing:border-box;}”是可以的,在特定的元素裡如果能避免最好不要改變它預設的盒模型。
文件流
如果你能避免最好不要改變一個元素的預設行為。儘可能的保持元素 自然文件流。例如,刪除影象下的 white-space 不應該讓你改變其預設顯示:
同樣的,如果你能避免最好不要把一個元素脫離文件流。
定位
css有很多方法來定位元素，但是最好使用下面的屬性/值，按照優先順序:
選擇器
減少選擇器緊密耦合的DOM。考慮新增一個類的元素，當你超過 3 層結構可以用偽類選擇器匹配,或後代 兄弟選擇器組合。
避免過載你的選擇器在你不需要的時候。
特殊點
不要讓值和選擇器難以覆蓋。減少使用id和 避免!important。
override
override 的樣式讓選擇器和除錯困難。儘可能的避免它。
繼承
不要重複宣告樣式,是可以繼承的。
簡潔
保持程式碼簡潔。儘可能的使用簡寫屬性,避免使用多個屬性。
語言編碼
只能是英語和數字
字首
積極除掉過時的字首。如果你需要使用它們,插入他們的標準屬性之前
動畫
用 transitions 代替 animations。動畫執行的時候儘量避免使用其他屬性，除了 opacity 和 transform.
單位
這個具體看場景，當你使用相對單位的時候推薦使用rem。用 秒 代替 毫秒
顏色
如果你需要使用透明，使用 rgba。否則，使用 16 進位制格式的
圖片
如果能用 css 代替最好避免使用 HTTP 請求
Hacks
不要使用這些
JavaScript
程式碼的可讀性，正確性，可表達性優於效能。JavaScript 基本上不會有效能上的瓶頸。需要優化的東西像 圖片優化，網路請求優化，DOM 渲染優化。如果你要在這個文件記住一條，那就記住這個吧。
無狀態
儘量讓你的函式保持乾淨，所有的函式最好沒有副作用，不要使用外部資料，返回一個新的物件代替現在已經存在的。
原生方法
儘可能的使用語言自帶的方法
型別轉換（隱式轉換）
請放心使用型別隱式轉換當那樣做有意義的時候，雖然說是要避免使用它，但是也不要盲目相信權威。
迴圈
當你不得已使用可變的物件時最好不要使用迴圈，使用array.prototype的方法。
如果你不想，或者說使用 array.prototype方法很噁心，建議使用遞迴
這是一個通用的迴圈函式，讓遞迴更簡單
Arguments
忘了 arguments 物件。其他的引數是個更好的選擇，因為：
-
可以命名，能夠讓你有個更符合函式期待的引數
-
和陣列沒啥大區別，可以讓你更方便的使用
Apply
忘了 apply()吧， 使用操作符代替.
Bind
當有更常用的辦法時不要用 bind()
高階函式
當你沒必要的時候避免使用巢狀函式
組合
避免多個函式的巢狀，使用組合代替
快取
變數
建議使用 const 代替 let,let 代替 var。
條件
建議用 匿名執行函式返回語句 代替 if,else,switch 語句。
物件迭代
儘可能的避免使用 for .. in
使用 Map 建立物件
在使用物件的時候，Map 是個更好的選擇
柯里化
柯里化很強大，但是很多開發者不是很熟悉。不要濫用它，但適當的使用是很不錯的。
可讀性
不要用一些看似聰明的小技巧混淆程式碼的可讀性
程式碼複用
不要害怕創造許多小的，高度組合可重複使用的函式
依賴
減少依賴，你不熟悉第三方程式碼，不要為了一個簡單的方法載入一個庫。
最後：“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”
祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。
