前端css常用代碼大全（前端開發規範二）

2023-05-07 23:26:00

CSS代碼組織以組件為單位組織代碼段；制定一致的注釋規範；組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動；

良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構建它們的方法。不要讓你的團隊其它成員來猜測一段不通用或不明顯的代碼的目的。

提示：通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

Class 和 ID使用語義化、通用的命名方式；使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；避免選擇器嵌套層級過多，儘量少於 3 級；避免選擇器和 Class、ID 疊加使用；

出於性能考量，在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用。

元素選擇器和 ID、Class 混合使用也違反關注分離原則。如果HTML標籤修改了，就要再去修改 CSS 代碼，不利於後期維護。

聲明順序

相關屬性應為一組，推薦的樣式編寫順序

PositioningBox modelTypographicVisual

由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。

其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。

引號使用

url 、屬性選擇符、屬性值使用雙引號。

媒體查詢（Media query）的位置

將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。

不要使用 @import

與相比，@import 要慢很多，不光增加額外的請求數，還會導致不可預料的問題。

替代辦法：

使用多個元素；通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件；其他 CSS 文件合併工具；連結的樣式順序：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

選擇字體

在 Web 上應用字體，是一門技術，同時也是一門藝術. 由於計算機歷史發展的原因，西文有大量優秀的字體可供選擇，可對於中文來說就是一項挑戰. 主流作業系統提供的本地中文字體極少，另一方面中文字體組成的特殊性，其體積過於龐大，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.

以下列出各種平臺下合適的中西文字體：

桌面端 Mac, Windows, Linux 上適合網頁顯示的優秀中文字體

移動端 iOS, Android 上適合網頁顯示的優秀中文字體

主流作業系統上適合網頁顯示的優秀西文字體

拋開宋/明體長時間作為系統默認字體，所產生的審美疲勞，宋/明體相比黑體是更合適作為內文字體. 大多的宋/明體針對內文設計，橫細直粗，造型方正，筆畫在小字號的情況下，不會糊在一起，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目，更適合作為標題使用.

但大部分人已經習慣在網頁上閱讀黑體，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內文默認提供黑體，可選擇性的切換宋/明體.

垂直的旋律音階

Robert Bringhurst 在《The Elements of Typographic Style》談到字號大小之間的比例，形似於音樂中的音階. 作曲時以某個特定的音階為基礎，才會形成特定的風格. 字號的排版同樣如此，有規律的字號變化，才會形成特定的排版風格.

將內文以 16px 作為字號

標題 h1, h2, h3, h4, h5, h6 以 16px 作為字號基礎，按同比例的遞減

節拍

此外，Robert Bringhurst 還談到版式中的空間就像音樂中的時間(Space in typography is like time in music)，言下之意，把握間距（行高）就如把握節拍. 節拍是對時間的分割，倘若搶拍便失去節奏. 文字的間距（行高）亦是對空間的分割，不一致間距（行高）比例，便會失去「垂直的旋律」.

將內文以 1.7em 作為行高

標題 h1, h2, h3, h4, h5, h6 以 1.5em 作為行高.