相信大多数人都有过关于CSS的痛苦经历,从我加入公司到现在,不到两年的时间里,听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题,为什么很多人觉得CSS很难写,如何才能让其他人更优雅的写CSS。在Code Review的时候,我渐渐的发现了问题所在,其实很多人已经掌握了丰富的CSS知识,但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个class里,如果优先级不够,再把前面的选择器都加上。结果就是CSS代码不断堆积,重复和冗余不断增多,维护也变得举步维艰。
问题找到了,但如何解决呢,虽然我在项目组内做了几次分享,还经常在Code Review的时候提出一些问题,却还是收效甚微。有时候知道什么是正确的很容易,但知道如何才能做到正确却很难。直到最近,看了几本书之后,发现了一个很适合指导设计CSS的方法,那就是五个为什么或者叫五问法。五问法来自丰田的精益生产,后来自然衍生到了精益创业中,在DDD以及UX相关书籍中都会见到这个方法,其主旨是深入发觉大量现象的背后所隐藏的真正原因。乍一看它是一个管理方法,其实我觉得它是一种思维方式,即刨根问底的找到问题的根本原因并解决。所以被应用于各个领域,自然对于CSS所面临的问题也正恰如其分。
场景示例
先来举个例子吧,某天Code Review发现了一条CSS代码是这样写的:
新闻热点
疑难解答