当前位置:Gxlcms > html代码 > 一次完整打包:工程師最需要的前端開發指南大補帖_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:16人阅读

  • 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,未經授權請勿使用。)

人气教程排行