前端規範之CSS規範

其餘規範：

HTML 規範

媒體文件規範

javascript 規範

nodeJs 規範

vue項目規範

CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示 HTML 元素，但因爲 CSS 天生全局性，隨着項目複雜度增長，極易出現樣式覆蓋以及其它的問題。

1. 通用規範

文件編碼

• 爲了不內容亂碼，統一使用 UTF-8 編碼保存。

• 樣式文件第一行設置字符集爲 UTF-8

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

縮進規範

統一使用兩個空格縮進

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

網站上使用 微軟雅黑 字體有三種形式：

一、【侵權】圖片中使用 微軟雅黑 字體，好比網站頭圖
二、【安全】網站 CSS 用 font-family 聲明網站使用 微軟雅黑 字體，好比文章標題和正文
三、【侵權】網站經過 font-face 引用 微軟雅黑 ，這種方式不常見
複製代碼

選擇器規範

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

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

屬性順序

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瀏覽器拓展進行瀏覽器窗口大小調試。

下載地址：www.cnplugins.com/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()_

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 自動添加私有前綴_