相信大多數人都有過關于CSS的痛苦經歷,從我加入公司到現在,不到兩年的時間里,聽到最多CSS相關的討論就是‘很難調’。所以我也一直在探究這其中有怎樣的問題,為什么很多人覺得CSS很難寫,如何才能讓其他人更優雅的寫CSS。在Code Review的時候,我漸漸的發現了問題所在,其實很多人已經掌握了豐富的CSS知識,但卻不知道如何分組屬性寫成class。最后只好在需要改變樣式的元素上隨意起個名字做class然后把所有要寫的屬性丟進這個class里,如果優先級不夠,再把前面的選擇器都加上。結果就是CSS代碼不斷堆積,重復和冗余不斷增多,維護也變得舉步維艱。
問題找到了,但如何解決呢,雖然我在項目組內做了幾次分享,還經常在Code Review的時候提出一些問題,卻還是收效甚微。有時候知道什么是正確的很容易,但知道如何才能做到正確卻很難。直到最近,看了幾本書之后,發現了一個很適合指導設計CSS的方法,那就是五個為什么或者叫五問法。五問法來自豐田的精益生產,后來自然衍生到了精益創業中,在DDD以及UX相關書籍中都會見到這個方法,其主旨是深入發覺大量現象的背后所隱藏的真正原因。乍一看它是一個管理方法,其實我覺得它是一種思維方式,即刨根問底的找到問題的根本原因并解決。所以被應用于各個領域,自然對于CSS所面臨的問題也正恰如其分。
場景示例
先來舉個例子吧,某天Code Review發現了一條CSS代碼是這樣寫的:
新聞熱點
疑難解答