这几天测试和修改，不仅需要改功能上的bug，还要对页面上的布局问题进行优化。
这次涉及到很多页面上的修改，总结了一下修改的类型。
优化主要修改css的样式
针对这次的的页面，我们前端用Pug,oocss进行设计，部署环境为webpack。oocss的做法简单地说就是所有的样式单独定义，在需要用到的地方加个class。
.mr15 {
margin-right: 15px;
}
<span class="mr15 desc">XXX</span>
这的话会使得全部的通用的class都是通用的。一次定义，多次使用。css不会过多有 margin-right: 15px; 的冗余。对css来说，很清晰，体积也不会大。但是这有一个前提，要与设计师有好的默契与规定。
pug是可以使得静态快速搭建的一个很好的模板引擎。所有类似的布局都可以抽取出来作为一个小小的模板，然后每个页面都是像搭积木一样很快能拼凑而成。如果是按照这种方法，必须重要的是，跟设计师对稿的时候，一定必须要对好边距，确定不会再改！似乎这样也有点不现实....
所以我们出现一个很尴尬的局面，静态转成jsp页面，没有用模板，直接每一块都是jsp，现在需要改个小小的边距问题...我都不愿意给他改。一来不能一下子改变样式就改变，得挨个挨个找。二来页面改完还要改js有动态加载所取的模板。严格来说，还要改之前的pug文件，这样维护起来会比较好。
相比普通的css设计模式，只在一个块内定义各种的margin、padding，针对这种改法就相对很快，只改一个css文件就生效。
- oocss模式针对css定义一次，按需添加class。这样的话生成静态页面比较快，而且减少css冗余。但是后期修改真的很麻烦。真心需要与设计师有好的默契和约定哟。
2.传统的针对块写css样式，修改容易，但是会造成多处css重复，若大多是还比较好维护，否则块样式一多，冗余还不好日后维护。
针对上述两种做法，我各取长短。有新的idea,继续采用oocss模式，但针对易改动样式，写在具体的块样式内，不以class的形式出现在标签里。
由上表可知，一些font-size，padding，margin改动较大，将来维护也应该是颜色方面会改动比较大的，这种成为B类。这样的话，这些B类的样式写在具体的块里。
.desc {
@extend .mr15;
@extend .f15;
}
<span class="flex-b-cc fd-col desc">XXXX</span>
用@extend的方式，编译成css时是以逗号形式增加的，如：
.mr15,.desc {
margin-right: 15px;
}
.f15,.desc {
font-size: 15px;
}
这样既能不会使得常用样式冗余，也不会使得页面修改尴尬。但是我对extend研究不深，不知道会不会遇坑...这个还有待研究。
最后总结一下项目页面修改尴尬的原因：
- 换了设计师，与前设计师设计思路不一样，导致有点改动完全颠覆，设计与前端应该在对稿时候就要修改好页面布局与设计
- 前端采用oocss的设计方式（现在真的领悟到缺点了）
- jsp没有设置模板，应该可以设计成与pug同步的页面
每个项目完结都应该
1.总结一下让自己纠结的地方
2.可以有哪些改进（设计模式或其他方面上）
3.总结修改内容类型
4.项目实现与修改的时间
网友评论