css規範

時間  2019-11-13
標籤 css 規範 欄目 CSS 简体版
原文   原文鏈接

 

1 命名規範

該命名規範主要解決如下問題：css

  • 從類名能夠清晰區分出其功能做用，使頁面結構清晰【命名空間、標識符】；
  • 以組件、模塊的思想去寫一個區塊的結構，強化結構的模塊化【BEM模塊思想、基類、子類、擴展類】；
  • 減小多人合做、項目耦合等狀況下的命名衝突【命名空間】；

1.1 命名思想

【強制】 區塊、模塊、組件等一個整個的結構遵循BEM命名思想；html

當你能肯定組件內最後一級的結構不會再發生變化時，最後一級可省略類名，使用兩層嵌套；html5

  • .block 表明了更高級別的抽象或組件；
  • .block__element 表明.block的後代，用於造成一個完整的.block的總體；
  • .is- | .has- | .ext- 表明.block的修飾符，不使用雙中劃線--。

相關連接：git

1.2 多單詞鏈接

【強制】 （全部的）多個單詞使用小駝峯式命名，不容許使用中劃線或者下劃線鏈接多個單詞；github

多個單詞使用小駝峯式命名，以提高名稱的識別度，例如：newsList；web

1.3 命名空間

【強制】 在合適的地方使用命名空間；segmentfault

  • 佈局：以g爲命名空間，例如：.g-wrap 、.g-header、.g-content、.g-mian、.g-aside 等；
  • 工具：以u爲命名空間，表示不耦合業務邏輯的、可複用的的工具，例如：.u-clearfix、.u-ellipsis 等；
  • 狀態：以is爲命名空間，表示動態的、具備交互性質的狀態，例如：.is-open、.is-active、.is-selected 等；
  • 組件：以ui或者mod爲命名空間，表示可複用、移植的組件模塊，例如：.ui-slider、.mod-dropMenu等；
  • 擴展：以ext爲命名空間，表示對組件基類的視覺形態的擴展，例如：.ext-cover、、.ext-alignLeft 等；

狀態類或擴展類通常出如今組件的父級節點，而且不容許單獨使用。舉個例子，同一個頁面有可能會在不一樣的地方都會使用is-active，而且每一個is-active所操縱的節點的是不一樣的，因此要使用.ui-userCard.is-active 或 .ui-userCard .is-active來定義api

1.4 圖片命名

  • 圖標：以ico做爲命名空間，例如：.ico-close 等；
  • LOGO：以logo做爲命名空間，例如：.logo-duowan 等；
  • 內容圖像：以img做爲命名空間，例如：.img-userGuide 等；

1.5 區塊命名

【推薦】 通常區塊均可以劃分爲頭部、身體和尾部，所以建議給你的區塊分別以 hd、bd、ft來劃分；瀏覽器

示例：app

.ui-card__hd {
    margin: 0; } .ui-card__bd { margin: 0; } .ui-card__ft { margin: 0; }

附：命名示例

命名示例

[⬆]

2 代碼風格

2.1 縮進

【強制】 使用 4 個空格作爲一個縮進層級，不容許使用 2 個空格 或 tab 字符；

示例：

/* Not so great */ .selector { margin: 0; } /* Better */ .selector { margin: 0; }

2.2 空格

【強制】 選擇器 與 { 之間必須包含空格；

示例：

/* Not so great */ .selector{ } /* Better */ .selector { }

【強制】 >、+、~ 選擇器的兩邊各保留一個空格;

示例：

/* Not so great */ main>nav { padding: 10px; } label+input { margin-left: 5px; } input:checked~button { background-color: #69C; } /* Better */ main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; }

【強制】 屬性名 與以後的 : 之間不容許包含空格， : 與 屬性值 之間必須包含空格；

示例：

/* Not so great */ margin :0; /* Better */ margin: 0;

【強制】 列表型屬性值 書寫在單行時，, 後必須跟一個空格；

示例：

/* Not so great */ font-family: Arial,sans-serif; box-shadow: 0 0 2px rgba(0,128,0,.3); /* Better */ font-family: Arial, sans-serif; box-shadow: 0 0 2px rgba(0, 128, 0, .3);

2.3 選擇器

【強制】 當一個 rule 包含多個 selector 時，每一個選擇器聲明必須獨佔一行；

示例：

/* Not so great */ .post, .page, .comment { line-height: 1.5; } /* Better */ .post, .page, .comment { line-height: 1.5; }

2.4 屬性

【強制】 屬性定義必須另起一行；

示例：

/* Not so great */ .selector { margin: 0; padding: 0;} /* Better */ .selector { margin: 0; padding: 0; }

【強制】 屬性定義後必須以分號結尾；

示例：

/* Not so great */ .selector { margin: 0 } /* Better */ .selector { margin: 0; }

[⬆]

3. 通用

3.1 選擇器

【強制】 如無必要，不得爲id、class選擇器添加 類型選擇器 進行限定；

在性能和維護性上，都有必定的影響。

示例：

/* Not so great */ dialog#error, p.danger-message { font-color: #c00; } /* Better */ #error, .danger-message { font-color: #c00; }

【建議】 選擇器的嵌套層級應該不大於 3 級，位置靠後的限定條件應可能精確；

在性能和維護性上，都有必定的影響。

示例：

/* Not so great */ .comment ul li a span {} #top-hero .hero-avatar li.avatar .pic em {} /* Better */ .comment .date {} #top-hero .pic em {}

3.2 屬性

3.2.1 屬性書寫順序

【建議】 同一 rule set 下的屬性在書寫時，應按功能進行分組，並以 Formatting Model > Box Model > Typographic > Visual 的順序書寫，以提升代碼的可讀性。

  1. Positioning Model 佈局方式、位置；相關屬性包括：position / top / right / bottom / left / z-index / display / float / ...
  2. Box model 盒模型；相關屬性包括：width / height / padding / margin / border / overflow / ...
  3. Typographic 文本排版；相關屬性包括：font / line-height / text-align / word-wrap / ...
  4. Visual 視覺外觀；相關屬性包括：color / background / list-style / transform / animation / transition / ...
  5. 若是包含 content 屬性，應放在最前面；

Positioning 處在第一位，由於他可使一個元素脫離正常文本流，而且覆蓋盒模型相關的樣式。盒模型緊跟其後，由於他決定了一個組件的大小和位置。其餘屬性只在組件 內部 起做用或者不會對前面兩種狀況的結果產生影響，因此他們排在後面。

詳情資料 Twitter的strictPropertyOrder

3.2.2 屬性引號

【強制】 屬性選擇器中的值必須用雙引號包圍。不容許使用單引號，不容許不使用引號。

示例：

/* Not so great */ article[character='juliet'] { voice-family: "Vivien Leigh", victoria, female } /* Better */ article[character="juliet"] { voice-family: "Vivien Leigh", victoria, female }

3.2.3 屬性簡寫

簡寫形式能夠在必定程度上壓縮樣式，但並不意味着你能夠對全部能夠簡寫的屬性聲明都使用簡寫。過分使用簡寫形式的屬性聲明會致使代碼混亂，會對屬性值帶來沒必要要的覆蓋從而引發意外的反作用，而且不能充分利用CSS的繼承。常見的濫用簡寫屬性聲明的狀況以下：

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

若是你只需定義其中的一兩個屬性，而不是所有，儘可能分開來寫：

/* Better */ .selector { margin-bottom: 10px; background-color: red; background-image: url(image.jpg); border-top-left-radius: 3px; border-top-right-radius: 3px; } /* Not so great */ .selector { margin: 0 0 10px; background: red; background: url(image.jpg); border-radius: 3px 3px 0 0; }

[⬆]

4 值與單位

4.1 文本

【強制】 文本內容必須用雙引號包圍，不容許使用單引號；

文本類型的內容可能在選擇器、屬性值等內容中。

示例：

/* Not so great */ html[lang|=zh] q:before { font-family: 'Microsoft YaHei', sans-serif; content: '「'; } /* Better */ html[lang|="zh"] q:after { font-family: "Microsoft YaHei", sans-serif; content: "「"; }

4.2 數值

【強制】 當數值爲 0 - 1 之間的小數時，省略整數部分的 0；

示例：

/* Not so great */ .selector { opacity: 0.8; } /* Better */ .selector { opacity: .8; }

4.3 長度

【強制】 長度爲 0 時須省略單位 (也只有長度單位可省)；

示例：

/* Not so great */ .selector { margin: 0px 10px; } /* Better */ .selector { margin: 0 10px; }

4.4 url()

【強制】 url() 函數中的路徑不加引號；

示例：

/* Not so great */ .selector { background: url("bg.png"); } /* Better */ .selector { background: url(bg.png); }

4.5 顏色

【強制】 RGB顏色值必須使用十六進制記號形式 #rrggbb，不容許使用 rgb()，帶有alpha的顏色信息可使用 rgba()；顏色值不容許使用命名色值；

示例：

/* Not so great */ .selector { box-shadow: 0 0 2px rgba(0,128,0,.3); border-color: rgb(0, 128, 0); color: gray; } /* Better */ .selector { box-shadow: 0 0 2px rgba(0, 128, 0, .3); border-color: #008000; color: #999; }

【建議】 顏色值中的英文字符采用小寫，至少要保證同一項目內一致；

示例：

/* Not so great */ .selector { color: #0073AA; } /* Better */ .selector { color: #0073aa; }

4.6 2D位置

【強制】 必須同時給出水平和垂直方向的位置；

2D 位置初始值爲 0% 0%，但在只有一個方向的值時，另外一個方向的值會被解析爲 center。爲避免理解上的困擾，應同時給出兩個方向的值。 background-position屬性值的定義

示例：

/* Not so great */ .selector { background-position: top; /* 50% 0% */ } /* Better */ .selector { background-position: center top; /* 50% 0% */ }

[⬆]

5. 文本排版

5.1 字體族

【強制】 font-family 屬性中的字體族名稱應使用字體的英文 Family Name，其中若有空格，須放置在引號中；

常見的字體族名稱以下：

字體 操做系統 Family Name
宋體 (中易宋體) Windows SimSun
黑體 (中易黑體) Windows SimHei
微軟雅黑 Windows Microsoft YaHei
微軟正黑 Windows Microsoft JhengHei
華文黑體 Mac/iOS STHeiti
冬青黑體 Mac/iOS Hiragino Sans GB
文泉驛正黑 Linux WenQuanYi Zen Hei
文泉驛微米黑 Linux WenQuanYi Micro Hei

【強制】 font-family 應當遵循如下順序：

  1. 西文字體在前，中文字體在後；
  2. 效果佳 (質量高/更能知足需求) 的字體在前，效果通常的字體在後的順序編寫；
  3. 最後必須指定一個通用字體族( serif / sans-serif )；

詳細說明可參考 如何保證網頁的字體在各平臺都儘可能顯示爲最高質量的黑體？

【強制】 font-family 不區分大小寫，但在同一個項目中，一樣的 Family Name 大小寫必須統一；

示例：

/* Not so great */ body { font-family: arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; } /* Better */ body { font-family: Arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; }

5.2 字重

【強制】 font-weight 屬性必須使用數值方式描述；

CSS 的字重分 100 – 900 共九檔，但目前受字體自己質量和瀏覽器的限制，實際上支持 400 和 700 兩檔，分別等價於關鍵詞 normal 和 bold。

瀏覽器自己使用一系列啓發式規則來進行匹配，在 >700 時通常匹配字體的 Regular 字重，>=700 時匹配 Bold 字重。

但已有瀏覽器開始支持 =600 時匹配 Semibold 字重 (見此表)，故使用數值描述增長了靈活性，也更簡短。

示例：

/* Not so great */ .selector { font-weight: bold; } /* Better */ .selector { font-weight: 700; }

[⬆]

6 變換與動畫

【強制】 使用 transition 定義屬性時應遵循如下順序：

  1. [ transition-property ]：檢索或設置對象中的參與過渡的屬性；
  2. [ transition-duration ]：檢索或設置對象過渡的持續時間；
  3. [ transition-timing-function ]：檢索或設置對象中過渡的動畫類型；
  4. [ transition-delay ]：檢索或設置對象延遲過渡的時間；

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

若是順序錯亂，在某些安卓瀏覽器上會讓動畫失效。

示例：

/* Not so great */ .selector { transition: color .2s 0 ease-in; } /* Better */ .selector { transition: color .2s ease-in 0; }

【建議】 儘量在瀏覽器能高效實現的屬性上添加過渡和動畫：

在可能的狀況下應選擇這樣四種變換：

  • transform: translate(npx, npx);
  • transform: scale(n);
  • transform: rotate(ndeg);
  • opacity: 0..1;

詳見 High Performance Animations

[⬆]

7 媒體查詢

【強制】 Media Query 不得單獨編排，必須與相關的規則一塊兒定義；

不要將他們一塊兒放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣作只會讓你們之後更容易忘記他們。

示例：

/* Not so great */ /* header styles */ /* main styles */ /* footer styles */ @media (...) { /* header styles */ /* main styles */ /* footer styles */ } /* Better */ /* header styles */ @media (...) { /* header styles */ } /* main styles */ @media (...) { /* main styles */ } /* footer styles */ @media (...) { /* footer styles */ }

8 兼容性

8.1 屬性前綴

【強制】 帶私有前綴的屬性由長到短排列，按冒號位置對齊；

標準屬性放在最後，按冒號對齊方便閱讀與編輯。

示例：

/* Not so great */ .selector { transition: color .2s ease-in 0; -webkit-transition: color .2s ease-in 0; -moz-transition: color .2s ease-in 0; } /* Better */ .selector { -webkit-transition: color .2s ease-in 0; -moz-transition: color .2s ease-in 0; transition: color .2s ease-in 0; }

8.2 hack

【建議】 若是有其餘解決方案，請不要使用hack；

[⬆]

9 代碼註釋

代碼是由人編寫並維護的。請確保你的代碼可以自描述、註釋良好而且易於他人理解。好的代碼註釋可以傳達上下文關係和代碼目的。不要簡單地重申組件或 class 名稱。

9.1 單行註釋

【強制】 星號與內容之間必須保留一個空格；

示例：

/* 新聞中心表格隔行變色 */

9.2 多行註釋

【強制】 星號要一列對齊，星號與內容之間必須保留一個空格；

示例：

/**  * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.  */

9.3 文件註釋

【強制】 文件頂部必須包含文件註釋，用 @file 標識文件說明。星號要一列對齊，星號與內容之間必須保留一個空格，標識符冒號與內容之間必須保留一個空格；

/**  * @file: 文件概要描述  * @author: author-name(mail-name@domain.com)  * author-name2(mail-name2@domain.com)  * @update: 2015-04-29 00:02:45  */
  • @update爲可選項，建議每次改動都更新一下；
  • 當該業務項目主要由固定的一個或多我的負責時，須要添加@author標識，一方面是尊重勞動成果，另外一方面方便在須要時快速定位責任人；

[⬆]

參考資料：

  1. bootcss編碼規範
  2. 豆瓣CSS Code Guideline
  3. spec css style guide
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程