CSS設(shè)計(jì)原則的示例分析

今天就跟大家聊聊有關(guān)CSS設(shè)計(jì)原則的示例分析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)竹山,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

相信大多數(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

.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)題?！?/p>

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

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

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

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

Dev：“因?yàn)椴患泳途蜁?huì)多出一部分呀?！?/p>

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

Dev：“因?yàn)闆](méi)加最大寬度，開(kāi)個(gè)玩笑，別生氣，其實(shí)我也不確定，不過(guò)用DevTools看了一下，好像它的父元素的寬度也不對(duì)?！?/p>

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

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

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

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

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

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

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

Dev：“原來(lái)是這樣，太好了，我學(xué)到了，樣式出問(wèn)題的地方不一定是代碼有問(wèn)題的地方，五個(gè)為什么太有用了。”

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

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

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

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

看完上述內(nèi)容，你們對(duì)CSS設(shè)計(jì)原則的示例分析有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞標(biāo)題：CSS設(shè)計(jì)原則的示例分析
轉(zhuǎn)載源于：http://muchs.cn/article30/ippcso.html

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

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

猜你還喜歡下面的內(nèi)容