您現在的位置是:電腦技術吧?>? 編程技術 ??>??設計原則,安全設計原則??>??正文詳情

設計原則,安全設計原則

修依云2019-11-25 17:01:31 人圍觀
簡介七大設計原則我相信大多數人對CSS都有過痛苦的經歷。從我加入公司到現在,在不到兩年的時間里,很難聽到大多數關于CSS的討論。所以我一直在探索問題,為什么很多人認為CSS很難工

相信大多數人都有過關于CSS的痛苦經歷,從我加入公司到現在,不到兩年的時間里,聽到最多CSS相關的討論就是很難調。

所以我也一直在探究這其中有怎樣的問題,為什么很多人覺得CSS很難寫,如何才能讓其他人更優雅的寫CSS。

在Code Review的時候,我漸漸的發現了問題所在,其實很多人已經掌握了豐富的CSS知識,但卻不知道如何分組屬性寫成class。

最后只好在需要改變樣式的元素上隨意起個名字做class然后把所有要寫的屬性丟進這個class里,如果優先級不夠,再把前面的選擇器都加上。

結果就是CSS代碼不斷堆積,重復和冗余不斷增多,維護也變得舉步維艱。

  問題找到了,但如何解決呢,雖然我在項目組內做了幾次分享,還經常在Code Review的時候提出一些問題,卻還是收效甚微。

有時候知道什么是正確的很容易,但知道如何才能做到正確卻很難。

直到最近,看了幾本書之后,發現了一個很適合指導設計CSS的方法,那就是五個為什么或者叫五問法。

五問法來自豐田的精益生產,后來自然衍生到了精益創業中,在DDD以及UX相關書籍中都會見到這個方法,其主旨是深入發覺大量現象的背后所隱藏的真正原因。

乍一看它是一個管理方法,其實我覺得它是一種思維方式,即刨根問底的找到問題的根本原因并解決。

所以被應用于各個領域,自然對于CSS所面臨的問題也正恰如其分。

  場景示例  先來舉個例子吧,某天Code Review發現了一條CSS代碼是這樣寫的:  CSS Code復制內容到剪貼板  .max-width {  max-width: 300px;  }  由此產生了以下對話(純屬虛構):  UI Dev:不應該這樣寫,這和直接寫內聯樣式有什么區別呢?  Dev:如果我不加最大寬度,頁面上那個元素左邊就會多出一部分,不然加個margin外邊距可以嗎?  UI Dev:這個...我也不確定,我從沒遇到過這樣的問題,一定是哪里有問題。

  Dev:確實這樣寫也挺不好的,過一段時間就不知道這行代碼什么意思了,也不敢修改它。

但究竟應該如何寫呢?  UI Dev:呃,這樣吧,我們來試試五個為什么,找找問題的根本原因。

  Dev:好啊,CSS的問題也困擾我好久了,能解決就最好了。

  UI Dev:首先問問,為什么要給元素加最大寬度呢?  Dev:因為不加就就會多出一部分呀。

  UI Dev:那為什么這個元素會多一部分呢?  Dev:因為沒加最大寬度,開個玩笑,別生氣,其實我也不確定,不過用DevTools看了一下,好像它的父元素的寬度也不對。

  UI Dev:已經接近了,為什么父元素的寬度不對?  Dev:因為父元素的內邊距兩邊不一樣。

  UI Dev:為什么父元素的內邊距不一致?  Dev:啊,我知道了,原來為父元素的父元素寫了一個last的偽選擇器,它是用來把padding-right設為0的,因為父元素現在正好是最后一個,所以被影響了。

  UI Dev:別急,為什么要把最后一個元素的padding-right設為0?  Dev:因為原先最后面的那個元素里面是一個無法修改樣式的控件,需要把padding-right設為0才能放得下。

  UI Dev:所以這才是問題所在,我們的意圖是給空間的容器加上padding-right為0的屬性對嗎?而不是給最后一個元素加,所以應該寫一個class,也許叫做widget-container之類的,放在那個容器上,然后把last偽選擇器刪掉,如此一切就正常了。

原先出問題的地方其實是沒問題的。

  Dev:原來是這樣,太好了,我學到了,樣式出問題的地方不一定是代碼有問題的地方,五個為什么太有用了。

  這樣反復問多次為什么可以讓我們找到問題的根本所在,如果僅僅從表面現象去解決問題很可能導致南轅北轍的后果。

而且在例子中的last偽選擇器就是因為沒有找到根本原因而簡單粗暴的寫了這樣一行代碼而導致的。

這個例子還很好的展現了五個為什么對于CSS的益處,不僅是找到問題的根本原因,還使得我們在寫CSS的時候意圖更加明確。

如此一來,class命名難的問題也迎刃而解,padding-right應該為的0的元素是那個控件的容器,所以很容易想出widget-container這樣的名字,因為通過五個為什么的方法找到了真正的意圖,此時,class叫什么和應該放在哪都是水到渠成了。

  按比例投入  但有時候我們所面對的項目不會這么善良,為什么的層級越多,說明CSS的關系也越復雜,所以現在我們來談談五個為什么中的一個重要原則,按比例投入。

其主旨是小問題小投入,大問題大投入,問題等級越高,投入也應該越大。

在CSS中來講,就是當發現樣式異常時,使用五個為什么深入找到的根本原因所在之處的重復次數越多,說明問題越嚴重,對問題的解決方案也應投入的更多。

  再回到上面的例子中,通過一個元素位置異常的問題,找到根本原因來自一個控件需要內邊距為0的容器元素,由于第一次發現,所以選擇投入較小的解決方案,針對該控件加一個class用來去掉內邊距。

目前看來是很正確的,但如果接二連三的從不同的問題上深入找到這個控件上,那就說明問題等級提升了,不應該僅僅是在每個調用控件的容器上添加該class。

此時我們可以考慮其他方式,比如把所有容器內邊距都設為0,而有針對性的對內部元素添加外邊距,如果問題等級繼續提升,還可以修改甚至替換控件,或者重構其他部分來適應該控件。

總之就是要按問題等級選擇解決問題的手段,這樣的好處不僅僅是原先在精益中那樣可以自動調節效率,還可以等樣式需求更明確的時候作出相應的重構。

  由于CSS的描述性,使得它很自由,所以同一個需求,往往一百個開發者有一百種實現。

在第一次碰到一個需求時,更是很難寫出最佳實現,只能有針對性的寫一個專屬class把需要的屬性扔進去。

其實問題不在于此,而在于之后是否能在相同問題出現時重構原先的代碼,根據所有相關問題寫出更具普適性的class。

有經驗的UI Dev有時會通過經驗來判斷,直接寫出這種class,Bootstrap這類框架就是這樣的,但沒有或較少經驗的開發者就會產生疑惑。

五個為什么的按比例投入原則可以很好的驅動CSS的開發,用深入的根本原因連接不同元素甚至不同頁面上出現的問題,這樣使我們能夠安心的以目前的問題等級來組織代碼,等到再次碰到問題并找到這里,才再次重構以解決問題。

版權聲明:本文由 修依云 整理編輯。

原標題:設計原則是什么意思,rowkey設計原則

轉載注明出處:http://www.dn9ww09s.icu/program/14373.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • xp怎么加入局域網,xp連接局域網

    xp怎么加入局域網,xp連接局域網 相關圖片xp與win10建立局域網我相信很多人都會遇到win7系統和Win XP LAN不能共享的情況,那么此時你會怎么做呢?今天,超人編輯將詳細告訴你為什么會出現這種情況,以及如何快速準確地應xp和...

  • 寧波市民卡自行車押金怎么退,市民卡怎么借自行車

    寧波市民卡自行車押金怎么退,市民卡怎么借自行車 相關圖片寧波市民卡app怎么騎自行車現在,有了寧波市民共享單車卡的支持,寧波市民有福了。他們只能通過寧波市民卡應用程序租車。那么,寧波市民需要采取哪些步驟來租有卡的自行車呢?...

  • 鼠標為什么不能拖拽,鼠標不能拖拽怎么辦

    鼠標為什么不能拖拽,鼠標不能拖拽怎么辦 相關圖片鼠標沒反應當你在網上看到一個游戲時,你需要拖動MC并旋轉MC。拖動是通過鼠標事件實現的,而旋轉需要Shift 鼠標單擊事件。我總覺得太麻煩了。因此,我希望能找到一種實現鼠鼠標丟...

  • 小酷是誰,卡小酷

    小酷是誰,卡小酷 相關圖片小酷663大酷卡和小酷卡是中國聯通和優酷推出的酷卡套餐。那么大酷卡和小酷卡有什么區別呢?大酷卡和小酷卡之間的費用是多少?如果你不知道聯通安卓版的大酷卡和小酷卡,那就和...

  • python字符串添加字符,python字符串去掉字符

    python字符串添加字符,python字符串去掉字符 相關圖片python查找字符串本文主要介紹了Python根據多個字符分割字符串的方法,涉及到Python中的正則表達式匹配技術,具有很高的實用價值。您可以參考下面的示例來描述Python根據python字符串切...

  • 告訴你個秘密,我把秘密告訴你

    告訴你個秘密,我把秘密告訴你 相關圖片告訴你了你不知道在接觸了這么長時間的電腦之后,你還有些竅門。超人收集了以下實用的電腦使用技巧,這些技巧都是電腦專家不想告訴你的。如果你有興趣的話,請來和超人一起看...

  • 雪花飄飄雪花飄飄,雪花飄飄還有什么飄飄

    雪花飄飄雪花飄飄,雪花飄飄還有什么飄飄 相關圖片雪花本例是一個GIF動畫效果教程,使用flash ationsrip3.0使逼真的雪花漂浮。我們經常在網絡動畫中看到漫天飛舞的雪花場景,看到雪花從天上拖下來。這真是雪花像什么一樣...

  • win7沒有權限卸載,win7沒有足夠的權限卸載

    win7沒有權限卸載,win7沒有足夠的權限卸載 相關圖片win7需要權限刪除文件在使用計算機軟件的過程中,會出現許多奇怪的問題。比如超人小編和你共享的卸載軟件,會被提示沒有權限,我們該怎么辦?接下來,我們將和超人小編談談如何...

  • 淘寶捉貓貓技巧,淘寶捉貓貓

    淘寶捉貓貓技巧,淘寶捉貓貓 相關圖片淘寶捉貓攻略淘寶618年年中的促銷即將到來。這次,淘寶安卓版推出了一款新的捉貓游戲,幫助玩家獲得更多折扣。那么如何在淘寶上玩貓和貓的游戲呢?如果你不知道的話,讓我們來...

  • 簡約網頁,個人簡約網頁

    簡約網頁,個人簡約網頁 相關圖片簡約網頁設計欣賞隨著web技術的不斷發展,web設計的趨勢正在發生變化。扁平、反應靈敏、視覺滾動差、紙牌風格等都給設計師帶來了更多的發揮空間。簡單的設計,以其簡潔直觀、輕...

熱評文章

  • 手機京東撤銷退貨申請,京東手機拆開能退貨嗎

    手機京東撤銷退貨申請,京東手機拆開能退貨嗎 相關圖片京東攔截訂單成功率京東618購物節即將到來。我相信會有很多小伙伴在購買完不滿意的商品后需要退貨。那怎么還京東手機呢?接下來,超人軟件編輯將介紹iPhone版手機京東的返程教程...

  • dreamweaver,dreamweaver使用

    dreamweaver,dreamweaver使用 相關圖片dream wear軟件對于開發人員,我們希望在本地測試后使用程序站點或服務器上的下載站點。接下來,我將介紹在dreamwear中創建site Apache配置,它使您能夠像本地服務器weaver...

  • 作業互助組,作業互助組官網

    作業互助組,作業互助組官網 相關圖片作業互助組網頁版家庭作業小組是一個非常實用的閱讀和學習軟件。在這個軟件中,用戶只需要掃描課本就可以得到答案。如果要邀請朋友使用此軟件,請共享您的邀請代碼。然后互助...

  • 頓號怎么打用電腦,電腦鍵盤上的頓號怎么打出來

    頓號怎么打用電腦,電腦鍵盤上的頓號怎么打出來 相關圖片筆記本電腦wife顯示紅叉甜甜圈表的暫停通常用來分隔同類并行事件或用漢字作為序列號分隔序列號和內部文本。它是一個普通的漢字。然而,當用戶需要在電腦上輸入甜甜圈時,他會發...

  • 網頁加載不出來,加載

    網頁加載不出來,加載 相關圖片重新加載Uiwebview提供了三種加載頁面的方法:-(void)load request:(nsurlrequest*)request;-(void)loadhtml網頁加載慢原因...

  • ios11所有版本發布時間表,ios11與現在的軟件兼容嗎

    ios11所有版本發布時間表,ios11與現在的軟件兼容嗎 相關圖片蘋果11是什么時候上市的在蘋果2017年WWDC大會上,IOS 11最受關注。蘋果粉絲最關心的是IOS 11何時推出,ios11支持哪些設備。然后,超人軟件編輯將介紹ios9能用到什么時候...

  • 葡萄酒酒瓶,紅酒瓶

    葡萄酒酒瓶,紅酒瓶 相關圖片紅酒開瓶器怎么用最終效果細膩美觀的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀。通過這些形狀的組合,我們可以得到一個瓶身...

  • 高德地圖添加商戶收費,高德地圖商家星級怎么弄

    高德地圖添加商戶收費,高德地圖商家星級怎么弄 相關圖片高德地圖添加商戶現在,越來越多的人選擇使用地圖導航,所以一些商業朋友想在地圖上標記他們的商店。如何標記商家?接下來,超人軟件將推出iPhone高德地圖標注門店...

  • x的不同字體,x字體設計

    x的不同字體,x字體設計 相關圖片x個性字體現在字體設計可以在電腦上輕松完成,但第一臺Mac電腦推出時,中文字體設計并不容易,而且有很多限制。然而,著名字體設計師柯志堅卻獨創了“李松”風格,后來成為蘋果...

  • 怎樣將html格式轉成PDF啊,PDF轉化html

    怎樣將html格式轉成PDF啊,PDF轉化html 相關圖片pdf怎么轉換成連接在上一個教程中,超人解釋了如何將excel表格轉換成HTML格式,然后許多網友問超人如何將PDF轉換成HTML。當然,對于這個文本格式轉換操作,可以使用PDF轉網頁轉換為...

關注微信

变脸官网查询