高效意味著能在相同的時(shí)間完成更多的工作，而完成更多的工作的結(jié)果就是可能會(huì)帶來(lái)更多的收益。在知識(shí)存量差別不大的背景下，大神和菜鳥(niǎo)的差異就是體現(xiàn)在知識(shí)調(diào)用迅捷度方面。你那邊已經(jīng)洋洋灑灑千行代碼出去了，我這邊還在查文檔找資料看DEMO。你都收到工程款了估計(jì)我還在和客戶協(xié)商階段。真特么傷不起……
每個(gè)懂JavaScript的人再去學(xué)習(xí)jquery的時(shí)候那種感覺(jué)，絕對(duì)像三伏天突然進(jìn)到空調(diào)間般的清爽順暢。在CSS中也會(huì)讓人有類似的體驗(yàn)，各位看官至少都是大鳥(niǎo)級(jí)別的人，關(guān)于CSS中屬性的簡(jiǎn)寫(xiě)絕對(duì)是再熟悉不過(guò)了。估計(jì)看到這里的時(shí)候你腦海中已經(jīng)浮現(xiàn)出來(lái)很多可以簡(jiǎn)寫(xiě)的CSS屬性了，例如margin、font、box-shadow等等。
喜歡“八卦”的人，都會(huì)有一種“深挖到底”的特質(zhì)。很不幸的是，我在面對(duì)自己感興趣的問(wèn)題的時(shí)候就會(huì)化身為這種“八卦人”。在“八卦之神”附身的瞬間，我就問(wèn)了自己一個(gè)問(wèn)題?！斑@些CSS簡(jiǎn)寫(xiě)的屬性到底有毛用？”
苦苦思索了半天自己總結(jié)了出幾點(diǎn)出來(lái)：簡(jiǎn)寫(xiě)屬性可以減少代碼量，讓代碼更整潔；簡(jiǎn)寫(xiě)屬性提高了代碼可讀性，讓代碼易于維護(hù)；簡(jiǎn)寫(xiě)屬性可以裝逼……好吧，我承認(rèn)最后一條有拼湊嫌疑。心中不禁疑惑起來(lái)，難道W3C那群貨們搞出來(lái)一些簡(jiǎn)寫(xiě)屬性能就是這么簡(jiǎn)單的原因么？
答案顯然沒(méi)這么簡(jiǎn)單，通過(guò)查資料也查不出個(gè)所以然。很明顯在這個(gè)問(wèn)題上我進(jìn)入了思維誤區(qū)，思維方式和思考方向一直在某個(gè)小范圍內(nèi)打轉(zhuǎn)轉(zhuǎn)出不去了。算了暫時(shí)擱一擱吧，說(shuō)不定什么時(shí)候靈光一現(xiàn)福至心靈就給解決了。
一次項(xiàng)目中無(wú)意中遇見(jiàn)的小BUG讓我猛然想起來(lái)了這個(gè)問(wèn)題，以前在面對(duì)這個(gè)問(wèn)題的時(shí)候，在網(wǎng)上搜索的資料都是在介紹具體有哪些屬性的值可以簡(jiǎn)寫(xiě)，或是介紹可以簡(jiǎn)寫(xiě)的方式，難以讓我一探究竟。
對(duì)于大神級(jí)別的存在，這問(wèn)題壓根就不是個(gè)問(wèn)題，但是我是小白啊，還是小白中的小白，不搞明白我是“反反復(fù)復(fù)徹夜難眠”。都說(shuō)喜歡思考的人運(yùn)氣總不會(huì)太差，看來(lái)在這方面我還是有點(diǎn)小小的運(yùn)氣啊//PS：自己悄悄的夸自己一下，順便在心里給自己記上一筆。
大神們都很清楚，以下兩行的CSS代碼并不是等價(jià)的。
//簡(jiǎn)寫(xiě)
background:#7D7D7D;
//展開(kāi)式
background-color:#7D7D7D;
你可能會(huì)很疑問(wèn)為什么不是等價(jià)的呢？這兩行CSS代碼都可以讓背景色變?yōu)?code>#7D7D7D（灰色）么？如果我告訴你不一定，肯定你會(huì)笑話我是SB。稍安勿躁，且聽(tīng)我娓娓道來(lái)。
如果你是使用簡(jiǎn)寫(xiě)background，那么我能保證你的到的百分百是#7D7D7D純色背景；但是如果你使用的是展開(kāi)式屬性background-color，那么應(yīng)用這個(gè)CSS聲明元素的背景最終有可能得到的是一個(gè)灰色的漸變圖案、一位性感妹子的圖片或是其他的什么東西。
因?yàn)橛锌赡軙?huì)有另外一條background-image或者background:linear-gradient();在起作用，展開(kāi)式屬性寫(xiě)法并不會(huì)幫助我們清空所有相關(guān)其他屬性，從而干擾到我們想要達(dá)到的效果。例如定義了font-size而漏掉了font-weight，就會(huì)有可能會(huì)導(dǎo)致整版文字都是加粗黑乎乎的一片。如果使用簡(jiǎn)寫(xiě)font直接就會(huì)將font-weight的值覆蓋掉，一切都不是問(wèn)題。
假設(shè)你的效率和耐心都有相當(dāng)?shù)摹靶逕挸潭取保敲窗阉械恼归_(kāi)式都來(lái)設(shè)置一遍，然后收工去玩LOL也可以。但你回頭很有可能會(huì)發(fā)現(xiàn)自己漏掉幾個(gè)；或者更扯的是在未來(lái)某一天CSS×.0版本被W3C那幫貨們推出來(lái)，而且里面還引入了更多展開(kāi)式屬性，這些屬性都會(huì)有默認(rèn)值，而這些默認(rèn)值又不是我們想要的，結(jié)果就是你的代碼沒(méi)辦法完全覆蓋它們，不敢想象那簡(jiǎn)直就是一場(chǎng)“天崩地裂”般的災(zāi)難。
說(shuō)到這里，好像展開(kāi)式屬性就一無(wú)是處，簡(jiǎn)寫(xiě)屬性就是“靈丹妙藥”。可惜我沒(méi)有這個(gè)意思，我所提倡的是合理的使用簡(jiǎn)寫(xiě)屬性。合理使用簡(jiǎn)寫(xiě)屬性是一種良好的防衛(wèi)性編碼方式，可以抵御未來(lái)的風(fēng)險(xiǎn)。如果我們十分明確的要去覆蓋某個(gè)具體的展開(kāi)式屬性并保留其他相關(guān)樣式，這時(shí)候就需要展開(kāi)式屬性。兩者并非“有你沒(méi)我、你死我活”的關(guān)系，而是相互協(xié)調(diào)和互補(bǔ)的關(guān)系。
展開(kāi)式屬性與簡(jiǎn)寫(xiě)屬性的配合非常高效有用，尤其是那些接受用逗號(hào)分隔的列表的屬性。//ep: background、box-shadow都可以接受逗號(hào)分隔的多重設(shè)置。舉個(gè)例子就明白了：
/*設(shè)置三張背景圖*/
background:url(../images/t-r.png) no-repeat top right / 2em 2em,
url(../images/b-r.png) no-repeat bottom right / 2em 2em,
url(../images/b-l.png) no-repeat bottom left / 2em 2em;
相信已經(jīng)身為大神的你，這幾行代碼簡(jiǎn)直就是“笑話”。稍安勿躁，這里我們需要借助這幾行代碼來(lái)闡述一個(gè)規(guī)則，并且介紹展開(kāi)式屬性與簡(jiǎn)寫(xiě)屬性配合使用的威力。
在上面的代碼中，簡(jiǎn)寫(xiě)屬性background后面每個(gè)位置參數(shù)值的含義，我想各位應(yīng)該很是熟悉。仔細(xì)觀察我們會(huì)發(fā)現(xiàn)background-size和background-repeat的值被我們重復(fù)了三次，每層背景的這兩個(gè)值都是相同的。這種情況我們需要借用一個(gè)規(guī)則了，其實(shí)這個(gè)規(guī)則我們?cè)趯?shí)際項(xiàng)目中的時(shí)候經(jīng)常用到，只是我們沒(méi)有注意過(guò)而已。這個(gè)規(guī)則就是CSS的“列表擴(kuò)散規(guī)則”，在上述例子中我們能從這個(gè)規(guī)則中的到不少好處。
那么什么叫“列表擴(kuò)散規(guī)則”呢？它的含義是：如果只為某個(gè)屬性提供一個(gè)值，那它就會(huì)擴(kuò)散并應(yīng)用到列表中的每一項(xiàng)。有了這個(gè)規(guī)則我們就可以把上面的代碼進(jìn)行“重構(gòu)”了，我們只需把重復(fù)的值抽出來(lái)寫(xiě)成一個(gè)展開(kāi)式屬性，同時(shí)刪除簡(jiǎn)寫(xiě)屬性中的相應(yīng)值，就可以完美的完成重構(gòu)過(guò)程。
/*設(shè)置三張背景圖*/
background:url(../images/t-r.png) top right,
url(../images/b-r.png) bottom right,
url(../images/b-l.png) bottom left;
background-repeat:no-repeat;
background-size:2em 2em;
這樣重構(gòu)代碼之后我們所得到的結(jié)果是不變的。我們只需要修改一處屬性就能改變?nèi)齻€(gè)背景層的值，例如修改background-size那么三個(gè)背景層的此屬性都等于被修改了。一次VS三次，一目了然可維護(hù)性更高是誰(shuí)。展開(kāi)式屬性與簡(jiǎn)寫(xiě)屬性的配合威力果然很是巨大。看完這些，你就會(huì)發(fā)現(xiàn)這種技巧經(jīng)常在我們的項(xiàng)目中被應(yīng)用。好東西大家都是會(huì)用的……
合理使用簡(jiǎn)寫(xiě)屬性會(huì)讓我們的代碼更“健壯”，并且代碼量也會(huì)相應(yīng)減少。簡(jiǎn)寫(xiě)屬性和展開(kāi)式屬性的配合能讓代碼的可讀性和維護(hù)性大幅度提高。而我們需要做的就是做那么一點(diǎn)點(diǎn)的改變，這下媽媽再也不用擔(dān)心我的學(xué)習(xí)了！
