組件庫通用樣式設計總結

時間 2019-11-17

標籤組件通用樣式設計總結简体版

原文原文鏈接

前言

做爲前端UI組件庫，從樣式角度去看，應當知足兩方面要求：一致性和可定製^[1]。css

其實這兩點也很是好理解，一致性保證了組件庫視覺上保持一致，而不是東拼西湊，並且說得高大上一點可能還有規範可循。而可定製就須要組件庫暴露接口，供開發者配置造成本身風格的組件庫。前端

一致性

可是具體一致表如今哪些方面呢？對於設計師而言，會很清楚，可是對於咱們前端開發人員而言，具體指的是哪些東西呢？咱們又如何把這些東西轉化爲代碼呢？這部分具體見設計規範部分。react

可定製

根據可定製的粒度大小，能夠分爲組件層面的可定製和整套組件庫的主題定製。有組件使用經驗的同窗都知道，使用具體組件時咱們能夠傳入某些參數或主題參數，組件就能夠呈現不一樣的表現。另外，一些有名的組件庫也都提供了主題定製的相關方法，如 antd-mobile 、Vant 和 Element ，尤爲是 Element ，提供了多種主題定製的方法。webpack

設計規範先行

前面提到的一致性是由「設計規範」來保證的，其實這一塊涉及到的內容很是多。可能在咱們眼裏就是組件庫裏的那套看似雜亂無序的通用變量（設計規範 ≠ 通用變量），可是其實裏面仍是有一些套路的，也建議多多和設計師溝通，產生思惟碰撞，你會發現一些平時寫代碼過程當中不同的思惟。在我和設計師溝通的過程當中，這點體驗很是深。git

設計規範包含哪些內容？

那和組件庫密切相關的設計規範體如今哪些方面呢？前幾天餓了麼前端架構師林溪在《Vue組件庫建設實踐》分享裏提到有如下內容：github

統一視覺樣式
- 色彩
- 佈局
- 字體
- 圖標
統一交互動效
- 時長、緩動
- 移動路徑
- 形變、編排

設計規範如何落地？

其實上面有一個關鍵詞：統一。咱們如何保證樣式統一？沒錯，就是剛纔提到的通用變量（但我仍然不會認同「設計規範 = 通用變量」，很難表達出這種感受），以 antd-mobile 爲例，具體包含如下內容^[2]：web

顏色（字體、填充、全局、邊框、透明度）
字體尺寸
字體族
圓角
邊框尺寸
間距（水平、垂直）
高度
圖標尺寸
部分組件樣式

其實理解了設計規範，咱們再來反過來理解組件庫裏面的通用變量就會感受其實變量之間其實也是存在某種內在體系的，在寫具體組件的樣式時就更會或者更能遵照這套規範，而不是胡亂定義了。gulp

相關擴展資料：數組

主題定製

主題定製是大多數組件庫都會提供的一個核心樣式相關的功能。可是具體解決方案有許多，但無非有兩種解決方式：bash

藉助gulp/webpack等打包工具相關的插件，配置須要定製的樣式變量，在打包時覆蓋對應變量值；
手動修改通用變量，或者新寫一套樣式文件覆蓋組件庫樣式。

具體可參照知名組件庫作法：

不過，對於企業內部組件庫而言，這一塊其實要求並不強，相反對於一套組件庫提供多套配色需求更高一點。這裏指的配色和主題定製仍是有區別的，由於配色要求不一樣「皮膚」的樣式須要同時存在，而主題定製至關於就只有一套配色。

而若是採用多種配色的話，增長一套配色文件也能夠達到「主題定製」的功能。

其餘通用樣式

除了設計規範裏的相關樣式外，其實還包含但不限於以下通用/複用樣式：

reset / normalize
hairline
animation
util / mixins
clearfix
……

這裏不只僅組件庫，通常項目中也會有這方面的通用樣式，相信你們都明白，這裏就不展開介紹了。可是這也很重要，是組件庫樣式基礎的一部分！

代碼結構

下面是借鑑知名組件庫後設計的一個樣式代碼結構，供參考，供拍磚。

style
├── core
|   ├── animation.scss
|   ├── color-card.scss
|   ├── hairline.scss
|   ├── mixins.scss
|   └── normalize.scss
├── themes
|   ├── skin
|   |   ├── _brown.scss
|   |   ├── _green.scss
|   |   ├── _pink.scss
|   |   ├── ……
|   |   └── _white.scss
|   └── default.scss
├── core.scss
└── index.scss
複製代碼

另外，爲了開發方便，組件相關樣式變量都放在了組件代碼目錄，雖然會給後期維護（增長「配色」時須要更新每一個組件樣式特定代碼），可是這種狀況甚少。不過通用型組件庫會將其寫在通用變量中以方便主題定製粒度到組件層面。