如何搭建移動端CSS樣式庫

前端攻城小學生發表於2017-09-27
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的衝突

參考

相關文章