相信大多數(shù)人都有過(guò)關(guān)于CSS的痛苦經(jīng)歷，從我加入公司到現(xiàn)在，不到兩年的時(shí)間里，聽(tīng)到最多CSS相關(guān)的討論就是‘很難調(diào)’。所以我也一直在探究這其中有怎樣的問(wèn)題，為什么很多人覺(jué)得CSS很難寫(xiě)，如何才能讓其他人更優(yōu)雅的寫(xiě)CSS。在Code Review的時(shí)候，我漸漸的發(fā)現(xiàn)了問(wèn)題所在，其實(shí)很多人已經(jīng)掌握了豐富的CSS知識(shí)，但卻不知道如何分組屬性寫(xiě)成class。最后只好在需要改變樣式的元素上隨意起個(gè)名字做class然后把所有要寫(xiě)的屬性丟進(jìn)這個(gè)class里，如果優(yōu)先級(jí)不夠，再把前面的選擇器都加上。結(jié)果就是CSS代碼不斷堆積，重復(fù)和冗余不斷增多，維護(hù)也變得舉步維艱。

問(wèn)題找到了，但如何解決呢，雖然我在項(xiàng)目組內(nèi)做了幾次分享，還經(jīng)常在Code Review的時(shí)候提出一些問(wèn)題，卻還是收效甚微。有時(shí)候知道什么是正確的很容易，但知道如何才能做到正確卻很難。直到最近，看了幾本書(shū)之后，發(fā)現(xiàn)了一個(gè)很適合指導(dǎo)設(shè)計(jì)CSS的方法，那就是五個(gè)為什么或者叫五問(wèn)法。五問(wèn)法來(lái)自豐田的精益生產(chǎn)，后來(lái)自然衍生到了精益創(chuàng)業(yè)中，在DDD以及UX相關(guān)書(shū)籍中都會(huì)見(jiàn)到這個(gè)方法，其主旨是深入發(fā)覺(jué)大量現(xiàn)象的背后所隱藏的真正原因。乍一看它是一個(gè)管理方法，其實(shí)我覺(jué)得它是一種思維方式，即刨根問(wèn)底的找到問(wèn)題的根本原因并解決。所以被應(yīng)用于各個(gè)領(lǐng)域，自然對(duì)于CSS所面臨的問(wèn)題也正恰如其分。
場(chǎng)景示例

先來(lái)舉個(gè)例子吧，某天Code Review發(fā)現(xiàn)了一條CSS代碼是這樣寫(xiě)的：

CSS Code復(fù)制內(nèi)容到剪貼板

.max-width {   
    max-width: 300px;   
}  

由此產(chǎn)生了以下對(duì)話（純屬虛構(gòu)）：

    UI Dev：“不應(yīng)該這樣寫(xiě)，這和直接寫(xiě)內(nèi)聯(lián)樣式有什么區(qū)別呢？”

    Dev：“如果我不加最大寬度，頁(yè)面上那個(gè)元素左邊就會(huì)多出一部分，不然加個(gè)margin外邊距可以嗎？”

    UI Dev：“這個(gè)…我也不確定，我從沒(méi)遇到過(guò)這樣的問(wèn)題，一定是哪里有問(wèn)題。”

    Dev：“確實(shí)這樣寫(xiě)也挺不好的，過(guò)一段時(shí)間就不知道這行代碼什么意思了，也不敢修改它。但究竟應(yīng)該如何寫(xiě)呢？”

    UI Dev：“呃，這樣吧，我們來(lái)試試五個(gè)為什么，找找問(wèn)題的根本原因。”

    Dev：“好啊，CSS的問(wèn)題也困擾我好久了，能解決就最好了。”

    UI Dev：“首先問(wèn)問(wèn)，為什么要給元素加最大寬度呢？”

    Dev：“因?yàn)椴患泳途蜁?huì)多出一部分呀。”

    UI Dev：“那為什么這個(gè)元素會(huì)多一部分呢？”