一些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：“那为什么这个元素会多一部分呢？”