一般来说，有重构的团队，工作流程是这样的：设计师出稿 > 重构转静态页面 > jser 拉取数据实现交互等 …这样我们总是有静态页面在备份的，下次遇到修改什么的或者换一个人，还是可以由这个简单的静态页面熟悉下 html 结构。
而没有重构或一个人一条龙服务的，那就是：设计师出稿 > 边写页面边拉取数据实现交互…这种模式下，是不存在静态页面备份的，如果碰到修改什么或者换人，那看到的直接就是源代码中的各种逻辑判断，如果是你自己写的代码那恭喜你，如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧，当然最后还是免不了各种 bug。
最近因为改版一个模块，所以想去改善下这种方式，经过各种弯路，最后选择在 scss 文件中注释 html 结构。因为 scss 是按模块组织文件的，一个模块一个 scss 文件，所以这是非常合适的。
以腾讯课堂课程卡片模块为例：
可以看出这个模块存在几种逻辑判断，每种都有些小差异，如果另外一个地方要用到这个卡片或者略做修改，你要从线上扒 html 结构的话，要想扒出个齐全的逻辑还是比较困难的，而如果让你去阅读源码，里面各种判断输出也够头大的。
下面为我在 scss 文件中注释的结构：
是不是结构清晰明了，各种逻辑判断一目了然
简单说下该注释方法：
- 以 emmet 书写方法为骨架
()表示特殊化追加的 class，[]表示需要的属性，｛｝表示标签内的文本内容- 单行判断采用单行注释法，以 if 开头
- 多行判断采用
if,else,end if
当然这中方法也有局限性，但是用在以模块化开发的 scss 文件中却是再好不过。
