前端規範之CSS規範

小婉發表於2019-06-25
前端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
網站上使用 微軟雅黑 字型有三種形式：

1、【侵權】圖片中使用 微軟雅黑 字型，比如網站頭圖
2、【安全】網站 CSS 用 font-family 宣告網站使用 微軟雅黑 字型，比如文章標題和正文
3、【侵權】網站通過 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 自動新增私有字首_

相關文章