PM說(shuō)要實(shí)現(xiàn)一個(gè)一鍵設(shè)置主題的功能，作為技術(shù)，你能想到的實(shí)現(xiàn)方式有哪些呢？

相信大家對(duì)網(wǎng)頁(yè)的主題樣式功能肯定不陌生。對(duì)于一些站點(diǎn)，在基礎(chǔ)樣式上，開(kāi)發(fā)者還會(huì)為用戶提供多種主題樣式以供選擇。

下面就是一個(gè)主題樣式功能：用戶可以在右側(cè)選擇自己喜歡的主題色，從而得到一個(gè)“個(gè)性”的頁(yè)面。

還有時(shí)候，我們開(kāi)發(fā)了一個(gè)系統(tǒng)用來(lái)售賣(mài)，采購(gòu)我們系統(tǒng)的客戶可能有多個(gè)。也許其中一個(gè)客戶很喜歡我們當(dāng)前的深色色系主題，但是另一個(gè)系統(tǒng)的采購(gòu)方希望我們能為它們定制一套新的樣式。他們希望買(mǎi)來(lái)的系統(tǒng)能貼合它們自己的品牌調(diào)性，變?yōu)闇\色的。這其實(shí)也是一種主題樣式的需求。

在上面的討論里，除了“主題”外，我們又引出了一個(gè)概念——個(gè)性化。經(jīng)常，我們說(shuō)到主題時(shí)，還會(huì)有一種說(shuō)法叫做：個(gè)性化主題。這兩者在英文中分別有兩個(gè)對(duì)應(yīng)的詞： Theming 與 Customisation。

當(dāng)我們說(shuō)主題（Theming）與個(gè)性化定制（Customisation）的時(shí)候，很多時(shí)候其實(shí)并沒(méi)有區(qū)分兩者。但實(shí)際上，兩者還是有一些微妙的區(qū)別的。

我們說(shuō)的主題（Theming）與個(gè)性化定制（Customisation）的時(shí)候，還是有一些微妙的區(qū)別的。

主要表現(xiàn)在：

系統(tǒng)的輸入是由開(kāi)發(fā)者定義的

一般來(lái)說(shuō)具有有限的種類(lèi)

具有已知的規(guī)則與常量

例如，我們常見(jiàn)的一些應(yīng)用會(huì)提供夜間主題、閱讀模式，這些也算是主題（Theming）的范疇。

特點(diǎn)表現(xiàn)在：

系統(tǒng)的輸入是由用戶來(lái)提供

一般具有無(wú)限種可能

規(guī)則更靈活，用戶“為所欲為”

可以看到，“個(gè)性化”其實(shí)更強(qiáng)調(diào)了用戶對(duì)系統(tǒng)的的影響力。

很多時(shí)候，我們談到“主題”與“個(gè)性化定制”時(shí)，也許并沒(méi)有一個(gè)明確的邊界。從上面的描述也可以看出，兩者似乎是處于天平的兩端，區(qū)別主要在于開(kāi)發(fā)者對(duì)規(guī)則的控制力度以及所能實(shí)現(xiàn)的差異化的粒度。

而我們更多的是在兩點(diǎn)之間找到一個(gè)平衡點(diǎn)。

我們已經(jīng)對(duì)主題樣式有了初步的了解，如果你也在產(chǎn)品中遇到了主題樣式的相關(guān)需求，不妨先看看以下幾點(diǎn)建議：

盡可能避免這個(gè)功能。因?yàn)楹芏鄷r(shí)候這可能只是個(gè)偽需求。

KISS原則（Keep It Simple, Stupid!）。盡可能降低其復(fù)雜性。

盡量只去改變外觀，而不要改動(dòng)元素盒模型（box-model）。

嚴(yán)格控制你的規(guī)則，避免預(yù)期外的差異。

把它作為一個(gè)錦上添花的功能來(lái)向上促銷(xiāo)（up-sell）。

Overriding default style with additional CSS.

這應(yīng)該是實(shí)現(xiàn)主題功能的一種最常用的手段了。首先，我們的站點(diǎn)會(huì)有一個(gè)最初的基礎(chǔ)樣式（或者叫默認(rèn)樣式）；然后通過(guò)添加一些后續(xù)的額外的CSS來(lái)覆蓋與重新定義部分樣式。

首先，我們引入基礎(chǔ)的樣式 components.* 文件

@import "components.tabs";
@import "components.buttons"

其中 components.tabs 文件內(nèi)容如下

.tab {
    margin: 0;
    padding: 0;
    background-color: gray;
}

然后，假設(shè)我們的某個(gè)主題的樣式文件存放于 theme.* 文件：

對(duì)應(yīng)于 components.tabs，theme.tabs 文件內(nèi)容如下

.tab {
    background-color: red;
}

因此，我們只需要引入主題樣式文件即可

@import "components.tabs";
@import "components.buttons"

@import "theme.tabs";

這樣當(dāng)前的樣式就變?yōu)榱?/p>

.tab {
    margin: 0;
    padding: 0;
    /* background-color: gray; */
    background-color: red;
}

實(shí)現(xiàn)方式簡(jiǎn)單

可以實(shí)現(xiàn)將主題應(yīng)用與所有元素

過(guò)多的冗余代碼

許多的CSS其實(shí)是無(wú)用的，浪費(fèi)了帶寬

把樣式文件切分到許多文件中，更加瑣碎

Styling a UI based on a state or condition.

該方式可以實(shí)現(xiàn)基于條件選擇不同的主題皮膚，并允許用戶在客戶端隨時(shí)切換主題。非常適合需要客戶端樣式切換功能，或者需要對(duì)站點(diǎn)某一部分（區(qū)域）進(jìn)行獨(dú)立樣式設(shè)置的場(chǎng)景。

還是類(lèi)似上一節(jié)中 Tab 的這個(gè)例子，我們可以將 Tab 部分的 (S)CSS 改為如下形式：

.tab {
    background-color: gray;
    
    .t-red & {
        background-color: red;
    }
    
    .t-blue & {
        background-color: blue;
    }
}

這里我們把.t-red與.t-blue稱(chēng)為 Tab 元素的上下文環(huán)境（context）。Tab 元素會(huì)根據(jù) context 的不同展示出不同的樣式。

最后我們給body元素加上這個(gè)開(kāi)關(guān)

    
...

此時(shí) Tab 的顏色為紅色。

當(dāng)我們將t-red改為t-blue時(shí)，Tab 就變?yōu)榱怂{(lán)色主題。

進(jìn)一步的，我們可以創(chuàng)建一些 (S)CSS 的 util class（工具類(lèi)）來(lái)專(zhuān)門(mén)控制一些 CSS 屬性，幫助我們更好地控制主題。例如我們使用如下的.u-color-current類(lèi)來(lái)控制不同主題下的字體顏色

.u-color-current {
    .t-red & {
        color: red;
    }
    
    .t-blue & {
        color: blue;
    }
}

這樣，當(dāng)我們?cè)诓煌黝}上下文環(huán)境下使用.u-color-current時(shí)，就可以控制元素展示出不同主題的字體顏色

    
...

上面這段代碼會(huì)控制

元素字體顏色為紅色主題時(shí)的顏色。

優(yōu)點(diǎn)

將許多主題放在了同一處代碼中

非常適合主題切換的功能

非常適合站點(diǎn)局部的主題化

可以實(shí)現(xiàn)將主題應(yīng)用于所有元素

缺點(diǎn)

有時(shí)有點(diǎn)也是缺點(diǎn)，將許多主題混雜在了同一塊代碼中

可能會(huì)存在冗余

2.3. 方式三：Config Theming

Invoking a theme based on settings.

這種方式其實(shí)是在開(kāi)發(fā)側(cè)來(lái)實(shí)現(xiàn)主題樣式的區(qū)分與切換的?；诓煌呐渲茫浜弦恍╅_(kāi)發(fā)的自動(dòng)化工具，我們可以在開(kāi)發(fā)時(shí)期根據(jù)配置文件，編譯生成不同主題的 CSS 文件。

它一般會(huì)結(jié)合使用一些 CSS 預(yù)處理器，可以對(duì)不同的 UI 元素進(jìn)行主題分離，并且向客戶端直接提供主題樣式下最終的 CSS。

具體實(shí)現(xiàn)

我們還是以 Sass 為例：

首先會(huì)有一份 Sass 的配置文件，例如settings.config.scss，在這份配置中定義當(dāng)前的主題值以及一些其他變量

$theme: red;

然后對(duì)于一個(gè) Tab 組件，我們這么來(lái)寫(xiě)它的 Sass 文件

.tab {
    margin: 0;
    padding: 0;
    
    @if ($theme == red) {
        background-color: red;
    } @else {
        background-color: gray;
    }
}

這時(shí)，我們?cè)谄渲耙胂鄳?yīng)的配置文件后

@import "settings.config";
@import "components.tabs";

Tab 組件就會(huì)呈現(xiàn)出紅色主題。

當(dāng)然，我們也可以把我們的settings.config.scss做的更健壯與易擴(kuò)展一些

$config: (
    theme: red,
    env: dev,
)

// 從$config中獲取相應(yīng)的配置變量
@function config($key) {
    @return map-get($config, $key);
}

與之前相比，這時(shí)候使用起來(lái)只需要進(jìn)行一些小的修改，將直接使用theme變量改為調(diào)用config方法

.tab {
    margin: 0;
    padding: 0;
    
    @if (config(theme) == red) {
        background-color: red;
    } @else {
        background-color: gray;
    }
}

優(yōu)點(diǎn)

訪問(wèn)網(wǎng)站時(shí)，只會(huì)傳輸所需的 CSS，節(jié)省帶寬

將主題的控制位置放在了一個(gè)地方（例如上例中的settings.config.scss文件）

可以實(shí)現(xiàn)將主題應(yīng)用于所有元素

缺點(diǎn)

在 Sass 中會(huì)有非常多邏輯代碼

只支持有限數(shù)量的主題

主題相關(guān)的信息會(huì)遍布代碼庫(kù)中

添加一個(gè)新主題會(huì)非常費(fèi)勁

2.4. 方式四：Theme Palettes

Holding entire themes in a palette file.

這種方式有些類(lèi)似于我們繪圖時(shí)，預(yù)設(shè)了一個(gè)調(diào)色板（palette），然后使用的顏色都從其中取出一樣。

在實(shí)現(xiàn)主題功能時(shí)，我們也會(huì)有一個(gè)類(lèi)似的“調(diào)色板”，其中定義了主題所需要的各種屬性值，之后再將這些信息注入到項(xiàng)目中。

當(dāng)你經(jīng)常需要為客戶端提供完全的定制化主題，并且經(jīng)常希望更新或添加主題時(shí)，這種模式會(huì)是一個(gè)不錯(cuò)的選擇。

具體實(shí)現(xiàn)

在方式三中，我們?cè)谝粋€(gè)獨(dú)立的配置文件中設(shè)置了一些“環(huán)境”變量，來(lái)標(biāo)示當(dāng)前所處的主題。而在方式四中，我們會(huì)更進(jìn)一步，抽取出一個(gè)專(zhuān)門(mén)的 palette 文件，用于存放不同主題的變量信息。

例如，現(xiàn)在我們有一個(gè)settings.palette.red.scss文件

$color: red;
$color-tabs-background: $color-red;

然后我們的components.tabs.scss文件內(nèi)容如下

.tabs {
    margin: 0;
    padding: 0;
    backgroung-color: $color-tabs-background;
}

這時(shí)候，我們只需要引入這兩個(gè)文件即可

@import "settings.palette.red";
@import "components.tabs";

可以看到，components.tabs.scss中并沒(méi)有關(guān)于主題的邏輯判斷，我們只需要專(zhuān)注于編輯樣式，剩下就是選擇所需的主題調(diào)色板（palette）即可。

優(yōu)點(diǎn)

編譯出來(lái)的樣式代碼無(wú)冗余

非常適合做一些定制化主題，例如一個(gè)公司采購(gòu)了你們的系統(tǒng)，你可以很方便實(shí)現(xiàn)一個(gè)該公司的主題

可以從一個(gè)文件中完全重制出你需要的主題樣式

缺點(diǎn)

由于主要通過(guò)設(shè)定不同變量，所以代碼確定后，能實(shí)現(xiàn)的修改范圍會(huì)是有限的

2.5. 方式五：用戶定制化 User Customisation

Letting users style their own UIs.

這種模式一般會(huì)提供一個(gè)個(gè)性化配置與管理界面，讓用戶能自己定義頁(yè)面的展示樣式。

“用戶定制化”在社交媒體產(chǎn)品、SaaS 平臺(tái)或者是 Brandable Software 中最為常見(jiàn)。

具體實(shí)現(xiàn)

要實(shí)現(xiàn)定制化，可以結(jié)合方式二中提到的 util class。

首先，頁(yè)面中支持自定義的元素會(huì)被預(yù)先添加 util class，例如 Tab 元素中的u-user-color-background

...

此時(shí)，u-user-color-background還并未定義任何樣式。而當(dāng)用戶輸入了一個(gè)背景色時(shí)，我們會(huì)創(chuàng)建一個(gè)

這時(shí)用戶就得到了一個(gè)紅色的 Tab。

Twitter 就是使用這種方式來(lái)實(shí)現(xiàn)用戶定制化的界面樣式的：

優(yōu)點(diǎn)

不需要開(kāi)發(fā)人員的輸入信息（是用戶定義的）

允許用戶擁有自己“獨(dú)一無(wú)二”的站點(diǎn)

非常實(shí)用

缺點(diǎn)

不需要開(kāi)發(fā)人員的輸入信息也意味著你需要處理更多的“不可控”情況

會(huì)有許多的冗余

會(huì)浪費(fèi) CSS 的帶寬

失去部分 CSS 的瀏覽器緩存能力

3. 如何選擇方案？

最后來(lái)聊聊方案的選擇。

在第二部分我們已經(jīng)了解了五種實(shí)現(xiàn)方式（或者說(shuō)4?種方法，因?yàn)榈谖宸N其實(shí)更偏個(gè)性化定制一些），那么面對(duì)產(chǎn)品需求，我們應(yīng)該如何選擇呢？

這里有一個(gè)不是非常嚴(yán)謹(jǐn)?shù)姆绞娇梢詤⒖?。你可以通過(guò)嘗試問(wèn)自己下面這幾個(gè)問(wèn)題來(lái)做出決定：

是你還是用戶誰(shuí)來(lái)確定樣式？

用戶：選擇【方式五】User Customisation

主題是否會(huì)在客戶端中被切換？

是：選擇【方式二】Stateful Theming 或【方式五】User Customisation

是否有主題能讓用戶切換？

是：選擇【方式二】Stateful Theming

你是希望網(wǎng)站的某些部分需要有不同么？

是：選擇【方式二】Stateful Theming

是否有預(yù)設(shè)的主題讓客戶端來(lái)選擇？

是：選擇【方式三】Config Theming

是否是類(lèi)似“貼牌”這類(lèi)場(chǎng)景？

是：選擇【方式一】Theme Layer 或【方式四】Theme Palettes