學好WEB前端之CSS規範

CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示 HTML 元素，但由於 CSS 天生全域性性，隨著專案複雜度增加，極易出現樣式覆蓋以及其它的問題。

1. 通用規範

檔案編碼

• 為了避免內容亂碼，統一使用  UTF-8  編碼儲存。

• 樣式檔案第一行設定字符集為 UTF-8

@charset 'UTF-8'; /* 注意字符集說明應在第一行 */

縮排規範

統一使用 兩個空格縮排

web前端開發直播教程Q-q-u-n： 767273102 ，內有免費開發工具，零基礎，進階影片教程，希望新手少走彎路

2. 初始化規範

各瀏覽器廠商的初始樣式都不一樣，為了消除不同瀏覽器對 HTML 文字呈現的差異，我們常引入一些初始化樣式，如 normalize.css、reset.css 等，當對於這些樣式的引入我們需要注意下面幾種情況：

• 不使用 UI 框架，由零開始搭建
  從零開始搭建的情況下，進行樣式初始化，在專案最開始的時候就引入，不要在開發中途引入，避免不可預知的樣式衝突。

• 不使用 UI 框架，但使用了部分外掛
  外掛往往都帶有自己特有的樣式，如富文字外掛，在開發中途使用初始化樣式有可能導致樣式錯亂，所以不建議大範圍的初始化，只需 簡單進行初始化 即可。

* {
  padding: 0;
  margin: 0;
}

• 已使用 UI 框架
  在明確知道需要使用 UI 框架的時候， 不使用第三方初始化樣式 ，不管是在專案開始前還是進行中，因為 UI 框架一般都自帶初始化，額外引入了反而會影響原有效果。

3. 程式碼規範

命名規範

class 應以功能或內容命名，不以表現形式命名
class 與 id 單詞字母小寫，多個單片語成時，採用中劃線-分隔
使用唯一的 id 作為 Javascript hook, 同時避免建立無樣式資訊的 class

程式碼風格

• 統一使用 展開格式 ，不推薦緊湊格式

  /* 展開格式 */
  .test {
    color: red;
    font-size: 12px;
  }
  

  /* 緊湊格式 */
  .test {
    color: red;
    font-size: 12px;
  }
  

• 統一 兩個空格 縮排

• 屬性宣告結尾加分號

• 選擇器與左括號之間一個空格，屬性冒號後一個空格

  /* 推薦 */
  .test {
    color: red;
    font-size: 12px;
  }
  

  /* 不推薦 */
  .test {
    color: red;
    font-size: 12px;
  }
  

• 不要為 0 指明單位

• 顏色值和屬性值十六進位制數值能用簡寫的儘量用簡寫

  /* 推薦 */
  .test {
    color: #fff;
  }
  

  /* 不推薦 */
  .test {
    color: #ffffff;
  }
  

• 引號使用

  url() 、屬性選擇符、屬性值使用 單引號 。

• 清除浮動

  當元素需要撐起高度以包含內部的浮動元素時，透過對偽類設定 clear 或觸發 BFC 的方式進行 clearfix。儘量不使用增加空標籤的方式。

  觸發 BFC 的方式很多，常見的有：

  • float 非 none
  • position 非 static
  • overflow 非 visible

字型規範

• 對外商用網站，不要用 font-face 引入 微軟雅黑 字型，避免侵權（包括圖片內容）
• 需要在 Windows 平臺顯示的中文內容，其字號應不小於  12px

網站上使用 微軟雅黑 字型有三種形式：
1、【侵權】圖片中使用 微軟雅黑 字型，比如網站頭圖
2、【安全】網站 CSS 用 font-family 宣告網站使用 微軟雅黑 字型，比如文章標題和正文
3、【侵權】網站透過 font-face 引用 微軟雅黑 ，這種方式不常見

選擇器規範

在嚴格遵照 BEM(Block Element Modifier) 時，建議只使用類選擇器，但 BEM 書寫麻煩，所以建議如下

• 禁用通用選擇器 *

• 不使用無具體語義定義的標籤選擇器

web前端開發直播教程Q-q-u-n： 767273102 ，內有免費開發工具，零基礎，進階影片教程，希望新手少走彎路

屬性順序

CSS 屬性順序是 CSS 良好編碼風格的一部分，有助於提高程式碼可讀性，便於發現程式碼問題，有利於團隊合作，但在專案中發現部分同學在書寫屬性順序時較為隨意，想到一個屬性就寫一個。

建議使用下列順序進行書寫

1. 定位屬性（position、display、float、left、right）
2. 尺寸屬性（width、height、padding、margin、border）
3. 字型屬性（color、font、text-align）
4. 其他屬性（background、cursor、outline）

目的是在瀏覽程式碼時，能逐步清晰目標元素的效果。

.test {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-size: 12px;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

4. 註釋規範

單行註釋

註釋以  /*  開始，以  */  結束,註釋內不能巢狀註釋，註釋內容 前後空一個空格 。

/* 推薦的單行註釋 */

/*不推薦的單行註釋*/

注：在 sass 和 less 等預處理語言上也可以使用雙斜線註釋，但編譯後註釋內容不會出現在 css 檔案中，所以建議統一使用 /* */ 註釋。

模組註釋

有時候我們需要對一個模組(一段程式碼塊)進行功能性說明，並希望能明顯區分其它程式碼，我們可以模組註釋的方式。

註釋以  /*  開始，以  */  結束， 前後空一個空格 ，第一行填寫 描述 ，最後一行行填寫 分割線 。

/* 推薦的模組註釋
---------------------------------------------------- */

/* 不推薦的模組註釋 ---------------------------------------------------- */

*  檔案資訊註釋

如果需要對一個檔案進行功能性說明，方便其他人快速明白該檔案的作用，推薦在檔案開頭(字符集說明下)寫入下列註釋，註釋內容包括檔案描述、建立人、建立時間等。

@charset "UTF-8";
/**
 * @desc 檔案功能描述，方便其他人快速理解
 * @author 建立人
 * @date 建立時間
 */

5. 覆蓋規範

• 儘可能 少用  importent
• vue 單檔案元件統一使用 css/less/sass  scoped
• 每個頁面/元件需要有一個 全域性唯一 的標識 id/class，屬於它下面的樣式都需要加上該唯一標識
• 避免全域性修改已有樣式，必須具體到頁面上(透過權重)
• 禁用全匹配 * 選擇器（特殊情況除外，如初始化）

vue 單檔案元件修改樣式不生效可使用  /deep/  或  >>>

6. 媒體查詢

對於內部管理系統，商務多使用 ThinkPad 筆記本，螢幕解析度為  1366*768 。建議使用 Resolution Test 瀏覽器擴充進行瀏覽器視窗大小除錯。

下載地址： /devtool/res…

常用尺寸如下

大小	描述
≥1366px	大螢幕 大桌面顯示器
≥1200px	中等螢幕 桌面顯示器
≥992px	中等螢幕 桌面顯示器
≥768px	小螢幕 平板
<768px	超小螢幕 手機

優先 PC 端

預設按最大尺寸進行佈局，當尺寸縮小時逐步變成移動端佈局

body {
  background: gray;
}
@media screen and (max-width: 1366px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
@media screen and (max-width: 920px) {
  body {
    background: green;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: black;
  }
}

優先移動端

預設按最小尺寸進行佈局，當尺寸放大時逐步變成 PC 端佈局

body {
  background: gray;
}
@media (min-width: 768px) {
  body {
    background: red;
  }
}
@media (min-width: 920px) {
  body {
    background: green;
  }
}
@media (min-width: 1200px) {
  body {
    background: yellow;
  }
}
@media (min-width: 1366px) {
  body {
    background: red;
  }
}

如果需要做列印樣式進行適配，需要使用@media print

@media print {
  body {
    background: #fff;
  }
}

7. 單位規範

CSS 單位有兩種，分別是 絕對單位 和 相對單位 。

• 常用絕對單位

  • px：畫素 (計算機螢幕上的一個點)
  • cm：釐米
  • in：英寸
  • pt：磅 (1 pt 等於 1/72 英寸)

• 常用相對單位

  • %：父元素百分比
  • vw：視口寬度百分比
  • vh：視口高度百分比
  • em：當前字型倍數
  • rem：根元素字型倍數
  • *  rpx：微信小程式專用，規定螢幕寬為 750rpx

使用較多的單位有 px、%、rem 三種， 建議 PC 端用 px 單位、移動端用 rem，需要具體控制尺寸還是使用 px

備註：如果需要計算不同單位下的值，可以使用 css3 方法 calc()_

web前端開發直播教程Q-q-u-n： 767273102 ，內有免費開發工具，零基礎，進階影片教程，希望新手少走彎路

8. 相容性規範

私有屬性的使用

正是由於瀏覽器廠商的不同，導致了一些樣式需要加字首才生效，下面的常見的瀏覽器核心和字首

瀏覽器	核心	字首
Firefox	Gecko	-moz-
Chrome	WebKit	-webkit-
IE	Trident	-ms-
Safari	WebKit	-webkit-
Opera	Presto	-o-
國內知名瀏覽器	WebKit	-webkit-
常見手機瀏覽器	WebKit	-webkit-

CSS3 瀏覽器私有字首在前，標準字首在後

.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

備註：在 webpack 環境下，可以使用 postcss-loader 自動新增私有字首_