如何搭建移動端CSS樣式庫

前言

在搭建公司的樣式庫時本身的一點整理，中間遇到了不少疑惑，也解決了不少疑惑。目前樣式庫和文檔還在繼續開發編寫中，但願該文章對存在疑惑的朋友有幫助，也但願有經驗的大牛們能提供更多思路上的幫助。

爲何須要搭建本身的樣式庫

如今這麼多優秀的開源組件庫,爲何還要搭建本身的組件庫呢?
每一個公司都有本身的設計風格,以及不同的產品需求,若是引入其餘第三方組件，很大可能帶來風格和操做上的不統一。
大部分狀況下,沒法直接使用開源組件庫。開發人員接到頁面需求後需從頭開始進行頁面佈局。
開發本身的樣式庫能夠作到如下幾點:

1. 設計風格統一,能夠根據本身的產品進行深度定製
2. 統一維護,組件樣式複用,減小樣式兼容Bug,提升開發效率
3. 統一規範,防止多人協做時候風格衝突樣式衝突,提升頁面可讀性和可維護性
4. 提升前端與設計交互的協做效率

前期準備

搭建樣式庫以前,須要作哪些準備?

1. 肯定模塊分類方法
2. 肯定命名規範和行爲規範
3. 肯定字體、字體大小、主次色調、主次間距、頁面層級規範等
4. 肯定工程的組織結構,如何便於開發維護與發佈
5. 肯定說明文檔的輸出方式

工程的組織結構

工程的組織結構要需便於開發、維護與發佈
文件組織結構: 見工程
開發: 使用LESS + Vue(DEMO) + Webpack + Postcss
DEMO與文檔: 使用Github + GitPages + GitBook,之後會維護到公司的Gitlab上。
發佈: 目前一鍵發佈到私有npm,並同步上傳到CDN

CSS模塊分類方法

大部分以組件爲粒度進行分類,小部分以屬性爲粒度進行分類.
組件內部更多的以屬性爲粒度進行分類
將REM和OOCSS兩種設計模式結合使用
可參考Mint UI Button、Ant UI Button

• 通用,包括文字font、顏色color、狀態status、皮膚skin
• 佈局layout,柵格gird、間距row/col
• 按鈕button
• 導航nav
• 標籤tab
• 表單form
• 列表list/item
• 進度條/步驟條progress/schedule
• 圖標icon
• 模態框modal
• 提醒toast
• 對框dialog
• 彈框actionsheet
• 面板panel

CSS命名規範

採用BEM命名規範,可是使用'-'進行鏈接,如命名空間(ui)-block-element-modifier

• block
  是頁面中獨立存在的區塊，能夠在不一樣場合下被重用,如:nav
• element
  是構成Block的元素，只有在對應Block內部才具備意義，是依賴於Block的存在,如nav-item
• modifier
  是描述Block或Element的屬性或狀態。同一Block或Element能夠有多個Modifier,如nav-item-disable
  需注意一個Block下的Element均屬於Block,儘量的分開命名以防名字過長嵌套過多,Modifier也遵循這個規則。
  如:ui-card-header與ui-card-header-title應該儘可能寫出ui-card-header與ui-card-title

三種命名規範:

• ui-block-element-modifier(weui)
• ui-block-element .is-modifier(mint ui)
• (*)ui-block-element .ui-block-modifier(大多數)

---------------我是一條分割線---------------

通過再三的糾結和思考,最終決定更改命名規範。
依然採用以上的命名規範,可是對於modifier修改成namespace-block--modifier或namespace-block-element--modifier
爲什麼作這樣的更改決定?
再從新看BEM規範的時候,又有了不同的體會。雖然接受不了 block__element--modifier 這樣的命名規則,可是BEM經過特殊的分割線來區分block、element、modifier,可以讓開發人員一眼看出該命名的做用。
因而決定,使用namespace-block、namespace-block--modifier、namespace-block-element、namespace-block-element--modifier這樣的命名規則
去掉BEM中的雙下劃線,由於感受太影響美感太雞肋了!!!!!可是保留--鏈接符,能夠方便的區分modifier這種可選屬性,又不影響美感!!!!

CSS行爲規範

• 書寫順序(自外向內)

  1. Positon 位置信息
     position、top、right、bottom、left、z-index、display、float、overflow等
  2. Box Model 盒模型信息
     width、height、margin、padding、outline、border等
  3. Typographic 文本相關
     font、text-align、line-height、letter-spacing等
  4. Visual 視覺效果
     color、background、transform、transition等

• 巧用註釋

  1. 文檔註釋

     /** * 頂部註釋 */
     /* 內容註釋 */複製代碼

  2. 修飾選擇器

     /*ol*/.breadcrumb{}
     /*p*/.intro{}
     /*ul*/.image-thumbs{}複製代碼

• 使用'-'鏈接符
• 避免使用ID選擇器
• 儘可能減小選擇器的嵌套
• 儘可能避免依賴html標籤
• 千萬不要把 CSS 樣式用做 JavaScript 鉤子

  <div class="btn-default js-btn-default"></div>複製代碼

• 省略 0 時的單位,包括0px、0em、0rem、0%
• 十六進制值所有大寫,由於Sketch色值均爲大寫,儘可能使用簡寫形式的十六進制值
• 省略小於 1 的小數前面的 0

注意事項

• CSS選擇器是從右向左匹配的(跟DOM的樹形結構相關,從葉子節點開始向上匹配)
  

  .test h3 span { ... }複製代碼

  讀取順序:
  
  1. 先找頁面上全部的span
  2. 沿着span的父元素找全部的h3
  3. 最後沿着h3的父元素找全部的.test
• OOCSS
  創建更細粒度的CSS類,提升他的靈活性和可重用性,遵循兩大原則
  1. （分離結構和主題）減小對 HTML 結構的依賴
  2. （分離容器和內容）增長樣式的複用性

需留意與解決的問題

1. 如何防止重名與破壞命名規則?
2. 如何防止頁面層級混亂?
3. 若是樣式不知足真實使用場景,該以什麼方式自定義擴展?
4. 對於使用相似flexible.js時,樣式該如何兼容?
5. 如何方便的於將來的組件庫整合在一塊兒?
6. 遇到與其餘庫同時使用時,如何處理樣式上的衝突,如z-index的衝突

參考

• WEUI
• NEC
• BEM
• OOCSS
• SMACSS
• 如何看待BEM
• 決戰BEM, 10個常見問題及其解決方案
• 爲何排版引擎解析 CSS 選擇器時必定要從右往左解析？