2019-07-14

一、css规范：

1.css选择符的两种逻辑

.wgt-step-read .arrow // 嵌套

.wgt-step-read-arrow // 组合类名

.wgt-step-read ul p span // bad

.wgt-step-read .pv // 添加类名，解决上面嵌套层级的问题

再来说说我们样式的指导原则：

wgt前缀（区分模块和其他类）

嵌套不要超过三层（添加类名解决）

合理使用类名（语义）

合理使用mixin（区分extend）

DRY

2、可维护性

旧的代码，陈年失修，而且一直在打补丁，自我感觉改版后，可维护性上了一个量级，这里就不能给大家贴代码展示了。

不过有一个数据还是可以拿来展示一些的，其实新旧版都要处理同样的逻辑的，同样的逻辑旧版用了107行，而新版只用了73行。

3、总结

这次改版让我明白了一个道理，页面中的任何元素都可能没有，需要考虑到容错处理；设计不能一蹴而就，往往需要反复打磨，反复修改，或者推翻重来；凭空的设计完美却不实用，好的设计必须结合产品内容，项目细节。

链接：https://yanhaijing.com/program/2016/04/14/how-to-reconstruct-a-large-historical-project/