樣式庫構建規範

時間 2019-11-13

標籤樣式構建規範简体版

原文原文鏈接

是否記得這樣的試題？用一套一樣的HTML結構，生成不一樣的視覺效果。CSS 的最大好處就是，靈活。好比一樣的HTML結構，能夠實現不一樣的外觀；又好比，一樣的外觀，能夠用不一樣的方式不實現。但靈活的同時也給咱們帶來麻煩。團隊協做時，你們的編碼風格各異，其餘人要看懂/debug的成本也所以提升。這時，咱們須要一個規範，一個像紅燈亮起咱們就不能擅闖的規範。css

在 Alipay 前端，Alice 框架有這樣一套規範，讓你們的協做更方便。這套規範基於 Alice，屬於 Alice 的一部分。其最基本的原則是，一樣的結構，產出不一樣的視覺效果。html

注：全部樣式的建立，都必須基於 CSS 規範進行前端

http://blog.csdn.net/shoyer/article/details/8300442git

1、Alice 設計模式

Alice 的設計起源於支付寶的 pa.css 文件。因爲這個文件被多系統引用，沒有人敢隨便改動裏面的內容，因此只能不斷往裏面添加內容，致使了這個文件體積變得很是大。因此，亟待重構。在嘗試重構後，發現了重構不是咱們真正想要的，因些主要從兩個方面來構建 Alice：github

減小依賴，避免耦合
統一風格，讓代碼有規可循，保證團隊協做效率

更個人設計思想，請參考：支付寶CSS架構設計模式

2、關於 Alice v3

檢出 Alice 前端解決方案的全部代碼:瀏覽器

到 Github 上 fork 咱們：https://github.com/sofish/Alice
直接 clone 下來：
[html] view plain copy
1. git clone git@github.com:sofish/Alice.git

1. 文件結構：

[html] view plain copy

---
|---- plugins/ 瀏覽器兼容解決方案對應的編輯器插件
|---- solutions/ 瀏覽器兼容解決方案
|---- tpl/ 參考的模板文件
|---- w3c/ HTML5/CSS3 標準文檔
|---- base.css Alice 的基礎，全部樣式均基於它
|---- readme.md

2. base.css 的做用

CSS reset
小功能：
- .fn-clear 清除浮動
- .fn-hide/.fn-show 至關於display:block;/display:none;
- .fn-left/.fn-right 至關於 float:left;/float:right;

3. 命名規範：

注意：非組件/解決方案，請不要使用.ui-/.sl-做爲前綴架構

.ui- 組件前綴
.sl- 兼容解決方案前綴

4. 註釋：以一個組件結構爲例

[css] view plain copy

/*
* @name: ui-組件名
* @overview: 組件描述
* @required: 與其餘組件的依賴關係，通常爲null
*/

[css] view plain copy

/* 通常模塊註釋
通常單行或塊狀註釋
註明 overwrite 的是能夠覆的，沒註明的是必須的
*/
.ui-someuiorsl{
display:block;
overflow:hidden;
width:999px;/* overwrite */
}

3、如何使用

1. 如何使用 alice 構建系統樣式

A. 分析視覺稿

雖然視覺稿是多變的，但 Alice 模塊的結構是不變的。所以，咱們拿到視覺稿的第一時間（交互白板的時候，其實已經能夠開始尋找），就是分析視覺稿。確認哪些資源是咱們相要的。而 Alice 方面，咱們要分析的是，全局設置的有那些，可使用 Alice 模塊的有哪些。一般，須要肯定的全局設置包括：app

顏色：文字、邊框、背景
字體：種類、大小
佈局：模塊、分欄
圖標：.ui-icon .ui-icon-NAME

通常，咱們爲全局設置建立一個單獨的 global.css框架

而那些應該作爲組件？通常狀況下 TPL（下詳）中的 14 個通用組件是必要的。另外須要根據頁面使用的實際狀況抽象。越多的組件，咱們的編碼就越統1、能建立越多的代碼片斷，這不管是對咱們的協做，仍是效率的提升，都是很是有益的。下面這個 CheckList 能夠做爲你規範樣式庫的參考：

至於如何規劃一個 CSS 文件，請參考《CSS 規範》

B. 使用tpl.css / tpl.html (命名規範在下面)

tpl.css 是一套 CSS 模板。若是你要構建新的組件。那麼，你能夠直接使用它。而不是引入+覆蓋她。TPL 中包括了，全局設置/ 佈局 / 列表 / 標題 / 切換 / 表單 / 表格 / 按鈕 / 對話框。從 checklist 中能夠看出已有組件列表。若是你的組件是已經有的，那麼，參照已有的結構去構建。若是你新建一個新的組件，那麼，使用下圖所示的方法來構建：

記住：

不一樣外觀的相同組件，HTML不要相互嵌套，CSS 推薦嵌套。

推薦的:

[html] view plain copy

<ul class="ui-nav">
<li class="ui-nav-item"> some text
<ul class="ui-nav-item-child">
<li> some text
<ul class="ui-list">
<li class="ui-list-item"> some text</li>
</ul...
</ul>
</li>
<li...
</ul>

不推薦的:

[html] view plain copy

<ul class="ui-nav">
<li class="ui-nav-item"> some text
<ul class="ui-nav-item-child">
<li> some text
<ul class="ui-nav">
<li class="ui-nav-item"> some text </li>
</ul...
</ul>
</li>
<li...
</ul>

推薦的：

[css] view plain copy

/* global scrope */
.ui-icon-rarr{background:...}
.ui-icon-larr{background:...}
.ui-title{font-size:...}
/* component only */
<strong>.ui-nav .ui-list</strong>{...}
<strong>.ui-table .ui-list</strong>{...}

不推薦的：(除非須要重用)

[css] view plain copy

/* set everything into a global scrope */
.ui-icon-rarr{background:...}
.ui-icon-larr{background:...}
.ui-title{font-size:...}
.ui-list{}
.ui-nav{}

在模塊化和命名上，以一個Tab組件爲例，分解以下：

值得注意的是：

組件名是必選的
狀態請參照下文中「狀態的規範」
在組件窗口最外一層添加狀態，而非給每個內容添加狀態。除非內容有獨立的狀態
好比，咱們能夠這樣寫：
[html] view plain copy
1. <div class="ui-new ui-new-hover">
2. <h3>TITLE</h3>
3. <p class="ui-new-cnt">
4. ....
5. </p>
6. </div>
但不要這樣寫：
[html] view plain copy
1. <div class="ui-new">
2. <h3 class="ui-new-title-hover">TITLE</h3>
3. <p class="ui-new-cnt ui-new-cnt-hover">
4. ....
5. </p>
6. </div>
直接使用 TPL，而不是覆蓋 TPL
充分考慮組件標籤的語義化和層級的靈活性
語義化是什麼？什麼樣的寫法纔是正確的。這裏給一個建議，把你將要構建的頁面當成一本書。是段落的，你就用P(aragraph)；是標題的，就用 H(eader)；是引用的，就用Blockquote。而不是簡單的，塊狀的東西由塊狀元素包含，行內的元素用行內的標籤包含。這裏有點要求就是，去深刻了解每一個 HTML 標籤的用法。關於靈活。像「在組件窗口最外一層添加狀態，而非給每個內容添加狀態。除非內容有獨立的狀態」就是一種靈活的表現。讓你更靈活去地改變狀態。

關於 HTML 的語義化，能夠參考：這樣去寫你的 HTML

2. 如何使用 style lib （系統樣式）

已有組件：直接使用
組件有更改：與和系統 owner 確認，並通過全面測試，才能修改組件
新樣式：基於 Alice TPL，建立新樣式

3. Alice 組件命名規範 (參照圖示)

組件名
儘可能讓人看到名字就能知道是什麼組件，比較 ui-tab，好比 ui-nav 這樣的命名。全部小圖標都使用 .ui-icon .ui-icon- 前綴，建議同一系統（域）人的經常使用小圖標所有合成 sprite。用 HTML ENTRY 來引用，不要寫空標籤，應使用 HTML ENTRY 來替代，以達到語義化的要求。HTML ENTRY 請參考這個文檔：https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg
組件總體狀態 = 組件名 + 狀態
經常使用的狀態有：hover, current, selected, disabled, focus, blur, checked, success, error 等。一般你的命名應該看起來像 .ui-name-hover, .ui-name-error 這樣。
組件模塊 = 組件名 + 模塊名
經常使用模塊名有：cnt(content), hd(header), text(txt), img(images/pic),item, cell 等，只要詞義表達了組件要實現的功能或者要表現出來的的外觀就能夠了。
組件模塊狀態 = 組件模塊 + 狀態
參照經常使用狀態

命名注意：

組件嵌套：大組件可有子組件命名。
拿支付寶某項目中的的 .ui-nav 爲例，若是有多級，能夠這樣命名：
[html] view plain copy
1. ui-nav > ui-subnav(ui-nav的子類) > ui-list(嵌套進去的其餘組件)
3. <ul class="ui-nav">
4. <li class="ui-nav-item">
5. <a href="#">nav Triggle Link</a>
6. <ul class="ui-subnav">
7. <li class="ui-subnav-item">
8. <a href="#">subNav Triggle Link</a>
9. <ul class="ui-list" ....
多狀態：多狀態時，用惟一的命名來代替，而非抽象名詞。
拿 ui-button 爲例：
[html] view plain copy
1. ui-button ui-button-1pxcorner [, ui-button-indexsign [, ui-button-SOMEID]]
而不要用 ui-button-round，這樣，就可能會有： ui-button-round-a ui-button-round-b … 了。按鈕又有多個狀態，命名就會太長了 ui-button-round-a-disabled
統一：
好比你比較喜歡 ui-tip-container ，另外的一個相同做用的地方，就不要寫 ui-message-cnt 了，用 [ui-tip-container ui-message-container] 或 [ui-tip-cnt ui-messages-cnt] 這樣會是更好的選擇
關於 .ui-icon-方向
通常狀況下，咱們常常遇到方向須要用單獨標籤來做爲小圖標的例子。好比幾乎每一個系統都會有的 ui-message 和 ui-tip，均可能會有上下兩個部分。推薦這樣寫：
[html] view plain copy
1. CLASS SPELL HTML ENTRIES
2. ----------------------------------------------------
3. .ui-icon-uarr Upward Arrow ↑
4. .ui-icon-darr Downtward Arrow ↓
5. .ui-icon-rarr Rightward Arrow →
6. .ui-icon-larr Leftward Arrow ←

4、樣式庫維護

1. 目錄結構

注：目前支付寶使用的樣式庫管理工具是架構組開發的一套 Maven 解決方案。

你的團隊可能不止一個樣式庫，像支付寶，有`個人支付寶`、`生活助手`和`商家服務`等產品，因此須要根據樣式庫規範建立不一樣的樣式庫。樣式庫能夠是 svn 中的一個代碼目錄。每一個組件的 css 組件都應該有對應的 html demo。固然，若是有對應的預覽截圖，並造成一個展現平臺，那就更好了。下面是代碼目錄和造成的展現平臺。

[html] view plain copy