用“五個(gè)為什么”寫CSS_html/css_WEB-ITnose

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

UI Dev：“這個(gè)...我也不確定，我從沒遇到過這樣的問題，一定是哪里有問題。”

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

UI Dev：“呃，這樣吧，我們來試試五個(gè)為什么，找找問題的根本原因?！?/p>

Dev：“好啊，CSS的問題也困擾我好久了，能解決就最好了?！?/p>

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

Dev：“因?yàn)椴患泳途蜁喑鲆徊糠盅?。?/p>

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

Dev：“因?yàn)闆]加最大寬度，開個(gè)玩笑，別生氣，其實(shí)我也不確定，不過用DevTools看了一下，好像它的父元素的寬度也不對。”

UI Dev：“已經(jīng)接近了，為什么父元素的寬度不對？”

Dev：“因?yàn)楦冈氐膬?nèi)邊距兩邊不一樣?！?/p>

UI Dev：“為什么父元素的內(nèi)邊距不一致？”

Dev：“啊，我知道了，原來為父元素的父元素寫了一個(gè)last的偽選擇器，它是用來把padding-right設(shè)為0的，因?yàn)楦冈噩F(xiàn)在正好是最后一個(gè)，所以被影響了。”

UI Dev：“別急，為什么要把最后一個(gè)元素的padding-right設(shè)為0？”

Dev：“因?yàn)樵茸詈竺娴哪莻€(gè)元素里面是一個(gè)無法修改樣式的控件，需要把padding-right設(shè)為0才能放得下?！?/p>

UI Dev：“所以這才是問題所在，我們的意圖是給空間的容器加上padding-right為0的屬性對嗎？而不是給最后一個(gè)元素加，所以應(yīng)該寫一個(gè)class，也許叫做‘widget-container’之類的，放在那個(gè)容器上，然后把last偽選擇器刪掉，如此一切就正常了。原先出問題的地方其實(shí)是沒問題的。”

Dev：“原來是這樣，太好了，我學(xué)到了，樣式出問題的地方不一定是代碼有問題的地方，五個(gè)為什么太有用了?！?/p>

這樣反復(fù)問多次“為什么”可以讓我們找到問題的根本所在，如果僅僅從表面現(xiàn)象去解決問題很可能導(dǎo)致南轅北轍的后果。而且在例子中的last偽選擇器就是因?yàn)闆]有找到根本原因而簡單粗暴的寫了這樣一行代碼而導(dǎo)致的。這個(gè)例子還很好的展現(xiàn)了五個(gè)為什么對于CSS的益處，不僅是找到問題的根本原因，還使得我們在寫CSS的時(shí)候意圖更加明確。如此一來，class命名難的問題也迎刃而解，padding-right應(yīng)該為的0的元素是那個(gè)控件的容器，所以很容易想出“widget-container”這樣的名字，因?yàn)橥ㄟ^五個(gè)為什么的方法找到了真正的意圖，此時(shí)，class叫什么和應(yīng)該放在哪都是水到渠成了。

按比例投入

但有時(shí)候我們所面對的項(xiàng)目不會這么善良，“為什么”的層級越多，說明CSS的關(guān)系也越復(fù)雜，所以現(xiàn)在我們來談?wù)勎鍌€(gè)為什么中的一個(gè)重要原則，按比例投入。其主旨是小問題小投入，大問題大投入，問題等級越高，投入也應(yīng)該越大。在CSS中來講，就是當(dāng)發(fā)現(xiàn)樣式異常時(shí)，使用五個(gè)為什么深入找到的根本原因所在之處的重復(fù)次數(shù)越多，說明問題越嚴(yán)重，對問題的解決方案也應(yīng)投入的更多。

再回到上面的例子中，通過一個(gè)元素位置異常的問題，找到根本原因來自一個(gè)控件需要內(nèi)邊距為0的容器元素，由于第一次發(fā)現(xiàn)，所以選擇投入較小的解決方案，針對該控件加一個(gè)class用來去掉內(nèi)邊距。目前看來是很正確的，但如果接二連三的從不同的問題上深入找到這個(gè)控件上，那就說明問題等級提升了，不應(yīng)該僅僅是在每個(gè)調(diào)用控件的容器上添加該class。此時(shí)我們可以考慮其他方式，比如把所有容器內(nèi)邊距都設(shè)為0，而有針對性的對內(nèi)部元素添加外邊距，如果問題等級繼續(xù)提升，還可以修改甚至替換控件，或者重構(gòu)其他部分來適應(yīng)該控件?？傊褪且磫栴}等級選擇解決問題的手段，這樣的好處不僅僅是原先在精益中那樣可以自動調(diào)節(jié)效率，還可以等樣式需求更明確的時(shí)候作出相應(yīng)的重構(gòu)。

由于CSS的描述性，使得它很自由，所以同一個(gè)需求，往往一百個(gè)開發(fā)者有一百種實(shí)現(xiàn)。在第一次碰到一個(gè)需求時(shí)，更是很難寫出最佳實(shí)現(xiàn)，只能有針對性的寫一個(gè)專屬class把需要的屬性扔進(jìn)去。其實(shí)問題不在于此，而在于之后是否能在相同問題出現(xiàn)時(shí)重構(gòu)原先的代碼，根據(jù)所有相關(guān)問題寫出更具普適性的class。有經(jīng)驗(yàn)的UI Dev有時(shí)會通過經(jīng)驗(yàn)來判斷，直接寫出這種class，Bootstrap這類框架就是這樣的，但沒有或較少經(jīng)驗(yàn)的開發(fā)者就會產(chǎn)生疑惑。五個(gè)為什么的按比例投入原則可以很好的驅(qū)動CSS的開發(fā)，用深入的根本原因連接不同元素甚至不同頁面上出現(xiàn)的問題，這樣使我們能夠安心的以目前的問題等級來組織代碼，等到再次碰到問題并找到這里，才再次重構(gòu)以解決問題。

原文鏈接

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com