在前端開發(fā)中，css是我們開發(fā)樣式必用的技術(shù)，今天和大家分享的就是分享的就是基于CSS color屬性的靜態(tài)UI組件重構(gòu)策略，希望對(duì)大家有幫助。

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

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

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

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

HTML部分：

　　<a href="#" class="weui_btn weui_btn_primary">按鈕

　　<a href="#" class="weui_btn weui_btn_warn">確認(rèn)

　　<a href="#" class="weui_btn weui_btn_default">按鈕

　　對(duì)應(yīng)的CSS實(shí)現(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個(gè)線框按鈕 */.weui-btn_plain-default {

　　color: #353535;

　　border: 1px solid #353535;

　　}.weui-btn_plain-primary {

　　color: #1aad19;

　　border: 1px solid #1aad19;

　　}

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

　　為什么隱隱會(huì)有上面這樣的感覺呢？

　　我來(lái)帶大家剖析下。

　　1. 按鈕狀態(tài)

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

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

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

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

　　HTML部分：

　　<a href="#" class="weui_btn primary">按鈕

　　<a href="#" class="weui_btn warn">確認(rèn)

　　<a href="#" class="weui_btn default">按鈕

　　對(duì)應(yīng)的CSS實(shí)現(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個(gè)線框按鈕 */.weui-btn_plain.default {

　　color: #353535;

　　border: 1px solid #353535;

　　}.weui-btn_plain.primary {

　　color: #1aad19;

　　border: 1px solid #1aad19;

　　}

　　當(dāng)然，對(duì)于weui這種開源的項(xiàng)目而言，上面基于狀態(tài)類名策略不一定合適，因?yàn)楹推渌?xiàng)目混雜，容易有沖突風(fēng)險(xiǎn)。

　　2. 各種顏色

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

　　每一種狀態(tài)都要寫一批顏色，要是遇到狀態(tài)多的場(chǎng)景（如下面這張項(xiàng)目設(shè)計(jì)稿截圖 – 先用demo截圖代替）：

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

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

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

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

　　這種實(shí)現(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組件所有動(dòng)態(tài)顏色全部走原生變量

　　例如， border 邊框色默認(rèn)就是 color 屬性的顏色，因此，寫 border 時(shí)候，顏色值可以直接缺省，直接：

　　.btn-normal { border: 1px solid;

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

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

　 3. 顏色類名既扮演狀態(tài)類名角色又扮演顏色控制角色

　　HTML直接變成類似下面這樣：

　　<a href="" class="btn-normal red">紅色按鈕

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

　　<a href="" class="btn-normal green">綠色按鈕

　　4.大功告成！

　　我們看一個(gè)具體例子加深理解，關(guān)于實(shí)色按鈕的實(shí)現(xiàn)。同樣的，我們有一個(gè)基礎(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)實(shí)現(xiàn)不一樣，我們這里直接指定了背景色，但是是以 currentColor變量的形式，也就是背景色和我們的文字顏色保持一致。

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

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

　　.btn-normal::first-line {

　　color: #fff;

　　}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)于基于 color 屬性實(shí)現(xiàn)各類靜態(tài)UI組件，我特意整理了一個(gè)完成的大demo，均是源自真實(shí)的項(xiàng)目

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

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

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

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

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

　　因?yàn)楫吘?/span>PC是先發(fā)展的，由于技術(shù)的限制，我們的思維也被限制了。

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

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

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

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

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

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

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

　　其次， 不適用于開源項(xiàng)目 。開源意味著會(huì)和其他眾多使用者的項(xiàng)目混在一起，我們自己團(tuán)隊(duì)中開發(fā)，自然會(huì)有規(guī)范約束，但是一旦魚龍混雜在一起，則，類似 .red 這樣的短命名類名很容易被其他樣式中 .red 類名給沖掉。因此，從這一點(diǎn)來(lái)看，weui的實(shí)現(xiàn)策略實(shí)際上是最合適的，使用本文的 color 屬性策略反而會(huì)容易被提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ì)上就是個(gè) dark 和 green 兩個(gè)顏色類名。

 

 

來(lái)源：張?chǎng)涡?/span>