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

創(chuàng)新互聯(lián)建站專(zhuān)注于呼瑪企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。呼瑪網(wǎng)站建設(shè)公司,為呼瑪?shù)鹊貐^(qū)提供建站服務(wù)。全流程按需定制制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

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

我們都知道，一個(gè)網(wǎng)站，只要設(shè)計(jì)師稍微有點(diǎn)專(zhuā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ǔ)類(lèi)名，寫(xiě)下基本樣式，然后不同的顏色重新命名一個(gè)狀態(tài)類(lèi)名，覆蓋默認(rèn)的邊框色或者背景色或者文字顏色，是什么顏色就寫(xiě)什么顏色。

我們不妨看看微信開(kāi)源的weui中按鈕的實(shí)現(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>

對(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)也還行，但是，不知道大家在寫(xiě)類(lèi)似上面代碼的時(shí)候，有沒(méi)有一種冗余和啰嗦的感覺(jué)？——就顏色不一樣而已，但是，卻要重新命名一個(gè)類(lèi)名，然后重新寫(xiě)顏色；只要再多一個(gè)狀態(tài)，就要再寫(xiě)一批。好麻煩！

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

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

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

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

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

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

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

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

對(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這種開(kāi)源的項(xiàng)目而言，上面基于狀態(tài)類(lèi)名策略不一定合適，因?yàn)楹推渌?xiàng)目混雜，容易有沖突風(fēng)險(xiǎn)。

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

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

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

每一種顏色狀態(tài)都要寫(xiě)一遍color屬性和border屬性，這種做苦力的感覺(jué)沒(méi)人會(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. 提取專(zhuān)門(mén)的顏色類(lèi)名
   例如，類(lèi)似下面這樣：

    

   .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屬性的顏色，因此，寫(xiě)border時(shí)候，顏色值可以直接缺省，直接：

    

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

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

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

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

    

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

4. 大功告成！

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

.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è)毛啊！

沒(méi)錯(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)名，各種顏色按鈕全部都出來(lái)了。

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

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

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

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

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

這孰優(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ù)成本是大大的降低，尤其在沒(méi)有使用Sass，Less, Styus這些預(yù)編譯工具的情況下。

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

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

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

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

最后，再提一句，本策略能夠?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#汽油在跑的感覺(jué)。

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

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

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

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

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

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

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

其次，不適用于開(kāi)源項(xiàng)目。開(kāi)源意味著會(huì)和其他眾多使用者的項(xiàng)目混在一起，我們自己團(tuán)隊(duì)中開(kāi)發(fā)，自然會(huì)有規(guī)范約束，但是一旦魚(yú)龍混雜在一起，則，類(lèi)似.red這樣的短命名類(lèi)名很容易被其他樣式中.red類(lèi)名給沖掉。因此，從這一點(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;
}

可以直接寫(xiě)成：

.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)名。

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

例如(Sass)：

.primary {
    @extend .green;
}

或者：

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

但，對(duì)于很多個(gè)顏色種類(lèi)的標(biāo)簽，顯然，還是基于顏色處理最佳，否則，你光想命名就要頭疼好一會(huì)啊，最后，往往是*-1,*-2,*-3…收?qǐng)觯碇?code>1,2,3對(duì)應(yīng)的是什么標(biāo)簽。

評(píng)論還有人詢(xún)問(wèn)hover態(tài)和active態(tài)該如何處理，其實(shí)demo頁(yè)面的按鈕那里有示意，可以使用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)一變深處理，如果要變亮可以試試淡淡的白色透明覆蓋。

五、沒(méi)有結(jié)語(yǔ)總覺(jué)得怪怪地

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

那隨便放點(diǎn)什么文字吧：

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

沒(méi)錯(cuò)，我就是那90%！

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

本文題目：color屬性的靜態(tài)UI組件重構(gòu)策略是什么
文章起源：http://www.2m8n56k.cn/article36/jcgesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、建站公司、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、網(wǎng)站建設(shè)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)