color屬性的靜態(tài)UI組件重構(gòu)策略是什么

這篇文章主要介紹color屬性的靜態(tài)UI組件重構(gòu)策略是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、傳統(tǒng)靜態(tài)UI組件實現(xiàn)的隱隱痛點

我們都知道，一個網(wǎng)站，只要設(shè)計師稍微有點專業(yè)，其站點的一些基礎(chǔ)顏色都是貫穿始終的。

主色，鏈接色，警示顏色，以及各種狀態(tài)顏色等等，都是一脈相承的，如果貴站的文字的紅色和按鈕的紅色是不一樣的紅色，文字的綠色和按鈕的綠色不是一個綠色，文字的藍(lán)色和按鈕的藍(lán)色不是一個藍(lán)色，我只能深表遺憾。

傳統(tǒng)的實現(xiàn)，包括現(xiàn)在移動端幾乎所有的實現(xiàn)套路都是下面這樣的，無論是標(biāo)簽還是按鈕，都是先設(shè)定一個基礎(chǔ)類名，寫下基本樣式，然后不同的顏色重新命名一個狀態(tài)類名，覆蓋默認(rèn)的邊框色或者背景色或者文字顏色，是什么顏色就寫什么顏色。

我們不妨看看微信開源的weui中按鈕的實現(xiàn)：https://weui.io/#button

HTML部分：

<a href="#" class="weui_btn weui_btn_primary">按鈕</a>
<a href="#" class="weui_btn weui_btn_warn">確認(rèn)</a>
<a href="#" class="weui_btn weui_btn_default">按鈕</a>

對應(yīng)的CSS實現(xiàn)如下：

.weui-btn {
    position: relative;
    display: block;
    margin-left: auto; margin-right: auto;
    padding-left: 14px; padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 2.55555556;
    border-radius: 5px;
    overflow: hidden;
}
.weui-btn_primary {
    background-color: #1aad19;
}
.weui-btn_default {
    color: #000000;
    background-color: #F8F8F8;
}
.weui-btn_warn {
    background-color: #E64340;
}/* 下面是2個線框按鈕 */.weui-btn_plain-default {
    color: #353535;
    border: 1px solid #353535;
}
.weui-btn_plain-primary {
    color: #1aad19;
    border: 1px solid #1aad19;
}

基本上，我們都是這么實現(xiàn)的，用起來也還行，但是，不知道大家在寫類似上面代碼的時候，有沒有一種冗余和啰嗦的感覺？——就顏色不一樣而已，但是，卻要重新命名一個類名，然后重新寫顏色；只要再多一個狀態(tài)，就要再寫一批。好麻煩！

為什么隱隱會有上面這樣的感覺呢？

我來帶大家剖析下。

1. 按鈕狀態(tài)
本質(zhì)上，按鈕就3個狀態(tài)，常用態(tài)，默認(rèn)態(tài)和警示態(tài)，但是，從類名的數(shù)量上來看，卻要5個，而且命名上又長有啰嗦，真的很難忍受，如果再和weui中按鈕禁用樣式混在一起，足有這么長，看我的手臂，全部張開都不夠??！例如下面這個綠色小按鈕的禁用態(tài)表示：

<a href="#" class="weui-btn weui-btn_mini weui-btn_primary weui-btn_disabled">按鈕</a>

實際上，我們可以把狀態(tài)單獨抽象出來，如： default, primary, warn, mini, disabled，與基礎(chǔ)按鈕樣式相互結(jié)合，生成UI效果，這樣，在HTML中使用類名的時候會清爽很多，而且記憶的成本也降低了。

其核心思想和技術(shù)細(xì)節(jié)參見我前不久剛寫的文章：“基于active,checked等狀態(tài)類名的web前端交互開發(fā)”。

如果上面的按鈕套用這種策略，則代碼應(yīng)該類似下面：
HTML部分：

<a href="#" class="weui_btn primary">按鈕</a>
<a href="#" class="weui_btn warn">確認(rèn)</a>
<a href="#" class="weui_btn default">按鈕</a>

對應(yīng)的CSS實現(xiàn)如下：

.weui-btn {
    ...
}
.weui-btn.primary {
    background-color: #1aad19;
}
.weui-btn.default {
    color: #000000;
    background-color: #F8F8F8;
}
.weui-btn.warn {
    background-color: #E64340;
}/* 下面是2個線框按鈕 */.weui-btn_plain.default {
    color: #353535;
    border: 1px solid #353535;
}
.weui-btn_plain.primary {
    color: #1aad19;
    border: 1px solid #1aad19;
}

當(dāng)然，對于weui這種開源的項目而言，上面基于狀態(tài)類名策略不一定合適，因為和其他項目混雜，容易有沖突風(fēng)險。

2. 各種顏色
例如primary狀態(tài)，明明色值都是一模一樣的#1aad19，但是上下卻出現(xiàn)了3次，如果使用Sass, Less變量還好，要是傳統(tǒng)的CSS寫法，以后換起顏色來，怕是要一個一個替換了。

每一種狀態(tài)都要寫一批顏色，要是遇到狀態(tài)多的場景（如下面這張項目設(shè)計稿截圖）：

臥槽，那樣式就要茫茫多了，一行行全部邊框色文字顏色，邊框色文字顏色，不過凡事都要兩面看，至少這樣子代碼看上去很壯觀。

每一種顏色狀態(tài)都要寫一遍color屬性和border屬性，這種做苦力的感覺沒人會喜歡的，明明是重復(fù)的東西，難道就不能前端工程化嗎？

實際上，以上兩個隱隱的痛點可以一次性全部搞定，就是采用本文所要介紹的“基于color屬性的UI組件重構(gòu)策略”。

二、CSS color屬性驅(qū)動的靜態(tài)UI組件實現(xiàn)策略

這種實現(xiàn)策略具體如下：

1. 提取專門的顏色類名
   例如，類似下面這樣：

    

   .dark { color: #33373d; }
   .gray { color: #969ba3; }
   .blue { color: #4284ed; }
   .green { color: #7ed321; }
   .orange { color: #f0643a; }
   .yellow { color: #f0c53a; }
   .purple { color: #a091ff; }
   .red { color: #ed424b; }
   .white { color: #fff; }

   然后，建議放在所有公用樣式的最底部。

2. 靜態(tài)UI組件所有動態(tài)顏色全部走原生變量
   例如，border邊框色默認(rèn)就是color屬性的顏色，因此，寫border時候，顏色值可以直接缺省，直接：

    

   .btn-normal { border: 1px solid; }

   對于背景色，我們可以走CSS的currentColor變量，關(guān)于currentColor變量可以參見我之前的文章：“currentColor-CSS3超高校級好用CSS變量”。

   .btn-normal { background-color: currentColor; }

3. 顏色類名既扮演狀態(tài)類名角色又扮演顏色控制角色
   HTML直接變成類似下面這樣：

    

   <a href="" class="btn-normal red">紅色按鈕</a>
   <a href="" class="btn-normal blue">藍(lán)色按鈕</a>
   <a href="" class="btn-normal green">綠色按鈕</a>

4. 大功告成！

我們看一個具體例子加深理解，關(guān)于實色按鈕的實現(xiàn)。同樣的，我們有一個基礎(chǔ)的類名和基本樣式：

.btn-normal {
  font-size: 14px;
  line-height: 30px;
  display: inline-block;
  padding: 0 16px;
  text-align: center;
  border-radius: 2px;  background-color: currentColor;}

注意，和傳統(tǒng)實現(xiàn)不一樣，我們這里直接指定了背景色，但是是以currentColor變量的形式，也就是背景色和我們的文字顏色保持一致。

什么？背景色和我們的文字顏色！那豈不是按鈕文字顏色和背景色混在一起，看個毛啊！

沒錯，按鈕的文字顏色確實不能和背景色一樣，但是，由于通常按鈕上的文字都只有一行，于是，注意，本文最精華部分來了——考慮到按鈕上的文字都是白色，因此我們可以這樣處理：

.btn-normal::first-line {
  color: #fff;
}

利用::first-line偽元素，于是，.btn-normal標(biāo)簽上的顏色實際上是設(shè)置給background-color的，而真正按鈕呈現(xiàn)的顏色已經(jīng)被::first-line偽元素牢牢設(shè)置好了，完全就不用擔(dān)心文字顏色和背景色混在一起的情況了。

于是乎，配合基礎(chǔ)顏色類名，各種顏色按鈕全部都出來了。

要實現(xiàn)設(shè)計師設(shè)計的綠色和紅色按鈕，直接HTML：

<a href="#" class="btn-normal green">綠色按鈕</a>
<a href="#" class="btn-normal red">紅色按鈕</a>

后來，設(shè)計師突然發(fā)現(xiàn)這兩者顏色按鈕不夠用，又設(shè)計了一款同尺寸的藍(lán)色按鈕，如果是傳統(tǒng)實現(xiàn)，那必須要分別給實色按鈕和線框按鈕重新起個命名，而且要在CSS代碼中繼續(xù)添加相關(guān)的背景色和邊框色樣式代碼，你說煩不煩啊！如果是基于color屬性實現(xiàn)，我去，工作量不要太輕松，直接HTML加個blue類名就可以了：

<a href="#" class="btn-normal blue">藍(lán)色按鈕</a>

沒錯，結(jié)束了，CSS文件都不需要打開了，實際上，一個基礎(chǔ)按鈕樣式寫好，其實等同于所有顏色的按鈕全部都寫好了。

這孰優(yōu)孰劣明眼人一看就看得出來了。

而且，最最關(guān)鍵的是，這稍微有點分量的項目中的靜態(tài)UI組件可不止按鈕這一種啊！

各種顏色文字本質(zhì)也是UI組件，然后，各種等級標(biāo)簽，榮譽(yù)標(biāo)簽，特殊按鈕，還有模擬控件啊，等等。

如果所有的這些靜態(tài)UI組件全部都采用基于color屬性實現(xiàn)的策略，那這些顏色就成為了真正意義上的貫穿整個項目的顏色變量了，這日后的維護(hù)成本是大大的降低，尤其在沒有使用Sass，Less, Styus這些預(yù)編譯工具的情況下。

并且，CSS書寫的工作量以及CSS代碼量那都是明顯下降啊，并且HTML層面代碼更加精簡直白，超好記憶。要知道，HTML代碼后期往往可能就是開發(fā)人員維護(hù)了，除非你文檔寫得好，否則開發(fā)人員怎么知道按鈕換個顏色要怎么辦？但是你走顏色關(guān)鍵字的獨立類名，完全不會CSS的開發(fā)人員他也能輕松維護(hù)啊。

總而言之，各種爽各種舒暢！

關(guān)于基于color屬性實現(xiàn)各類靜態(tài)UI組件，我特意整理了一個完成的大demo，均是源自真實的項目，您可以狠狠地點擊這里：基于CSS color屬性的靜態(tài)UI組件開發(fā)demo

幾個顏色類名搞定了下面30多個不同顏色不同風(fēng)格的靜態(tài)UI控件，可以說少了上百行CSS代碼都不為過：

最后，再提一句，本策略能夠?qū)崿F(xiàn)的重點技巧就是利用::first-line偽元素的文字控色技術(shù)。

三、技術(shù)發(fā)展與思維轉(zhuǎn)換

技術(shù)的發(fā)展往往會帶來相應(yīng)的思維方式上的轉(zhuǎn)變，這樣才能相輔相成，發(fā)揮新技術(shù)的潛力，如果還是使用以前的思維模式，怎么說呢，有著勞斯萊斯加著92#汽油在跑的感覺。

weui中按鈕的CSS書寫就是典型的傳統(tǒng)實現(xiàn)策略，扎實而穩(wěn)固，傳統(tǒng)最佳實踐的遺留產(chǎn)物。

因為畢竟PC是先發(fā)展的，由于技術(shù)的限制，我們的思維也被限制了。

例如，由于IE6瀏覽器對.a.b這種級聯(lián)類名樣式支持有嚴(yán)重bug，同時考慮到其效率在選擇器中排很后，因此，很長一段時間里，我們對于按鈕的樣式的覆蓋策略都不是基于狀態(tài)，而是基于完整的按鈕類名+狀態(tài)類名的這種方式，因為可以很好地支持IE6，且?guī)缀醪豢赡馨l(fā)生沖突。

放到顯示世界，大部分的項目都是自成體系，不會和其他項目直接參雜在一起，因此，可以適當(dāng)降低考慮沖突的風(fēng)險；第二，很多項目寫頁面的就一個人，由于不要擔(dān)心會遇到黃油手同事，所以，只要自己嚴(yán)格按照準(zhǔn)則來書寫，則簡單的代碼和快速的書寫帶來的收益會更高。

再例如，由于currentColor變量IE9瀏覽器才支持，所以，長期的PC項目開發(fā)并沒有讓重構(gòu)同學(xué)意識到我們現(xiàn)在再做移動端項目的時候，可以直接通過一個color屬性，改變按鈕或者圖標(biāo)或者標(biāo)簽的顏色而樣式不亂。如果這個世界先出現(xiàn)移動端，再出現(xiàn)PC端，我想，我們靜態(tài)UI組件的書寫策略可能就會如本文所言，基于color屬性的系統(tǒng)和貫穿書寫，而非來一槍打一炮的這種游擊策略。

換句話說，雖然CSS3技術(shù)帶來了很多很棒的東西，但是，我們的思維方式卻似乎還停留在老PC時代，或許是因為關(guān)注的僅僅是CSS3表面的那點特性表現(xiàn)的緣故吧。

四、基于CSS color重構(gòu)UI組件適用項目和場景

沒有哪一種策略是一方通行的，本文的color策略雖然精妙且好處多多，但同樣有其局限性。

首先是兼容性限制，技術(shù)關(guān)鍵點之一currentColor IE9+瀏覽器才支持，因此，目前適用于移動端開發(fā)，以及一些不需要管低版本IE瀏覽器的項目。雖然瀏覽器的進(jìn)步，相信不需要多久，PC項目也能看到這種策略的慢慢普及。

其次，不適用于開源項目。開源意味著會和其他眾多使用者的項目混在一起，我們自己團(tuán)隊中開發(fā)，自然會有規(guī)范約束，但是一旦魚龍混雜在一起，則，類似.red這樣的短命名類名很容易被其他樣式中.red類名給沖掉。因此，從這一點來看，weui的實現(xiàn)策略實際上是最合適的，使用本文的color屬性策略反而會容易被提issues，但是，細(xì)節(jié)上可以再完善，例如：

.weui-btn_plain-default {
    color: #353535;
    border: 1px solid #353535;
}
.weui-btn_plain-primary {
    color: #1aad19;
    border: 1px solid #1aad19;
}

可以直接寫成：

.weui-btn_plain-default {
    color: #353535;
    border: 1px solid;
}
.weui-btn_plain-primary {
    color: #1aad19;
    border: 1px solid;
}

繼而，border:1px solid可以放在基礎(chǔ)樣式中，因此，CSS進(jìn)一步縮減為：

.weui-btn_plain-default {
    color: #353535;
}
.weui-btn_plain-primary {
    color: #1aad19;
}

看到?jīng)]，本質(zhì)上就是個dark和green兩個顏色類名。

補(bǔ)充于翌日
評論有人提到，如果日后按鈕要從藍(lán)色變成綠色，現(xiàn)在的命名會很麻煩，樣式和語義不合，雖然我寫頁面這么多年，沒遇到過類似的變更，但是，難保其他項目不會，因此，對于按鈕的命名，還是基于狀態(tài)比較保險，或者使用比較隱晦的命名，例如primary, default等，但是，樣式這塊還是使用顏色控制，兩者并不沖突。

例如(Sass)：

.primary {
    @extend .green;
}

或者：

.green,
.primary {
   color: ...; 
}

但，對于很多個顏色種類的標(biāo)簽，顯然，還是基于顏色處理最佳，否則，你光想命名就要頭疼好一會啊，最后，往往是*-1,*-2,*-3…收場，鬼知道1,2,3對應(yīng)的是什么標(biāo)簽。

評論還有人詢問hover態(tài)和active態(tài)該如何處理，其實demo頁面的按鈕那里有示意，可以使用box-shadow內(nèi)陰影，或者使用background-image漸變，如下CSS：

.btn-normal:active {
  background-image: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}

所有按鈕統(tǒng)一變深處理，如果要變亮可以試試淡淡的白色透明覆蓋。

五、沒有結(jié)語總覺得怪怪地

可是人困眼乏，想不到該吐槽什么東西，早年嘛前一篇文章已經(jīng)拜過了。

那隨便放點什么文字吧：

BBC上說，70%嬰兒夜間哭鬧都是故意假裝的，目的是吸引大人來一起玩；而90%男性家長會假裝未醒，好讓孩子母親起來去照顧。

沒錯，我就是那90%！

以上是“color屬性的靜態(tài)UI組件重構(gòu)策略是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！