前端样式管理

在前端开发过程中，随着项目的扩大，良好的样式管理占据着举足轻重的作用

常用方法的预设

创建一个样式文件在全局引用，对于常用的一些css样式我们首先作出处理，比如下面的这些缩写及其实际的样式。

• .f-ib{display:inline-block;*display:inline;*zoom:1;}
• .f-dn{display:none;}
• .f-db{display:block;}
• .f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
• .f-csp{cursor:pointer;}
• .f-jcc-aic{display: flex; justify-content: center; align-items: center;}
• .f-fs1{font-size:12px;}
• .f-fs2{font-size:14px;}
• .f-fwn{font-weight:normal;}
• .f-fwb{font-weight:bold;}
• 等等等。

以上这些样式都可以预先定义在全局样式文件中，在我们实际的业务代码中直接在className中引用即可，避免了样式的冗余，而且比较规范。

less loop函数的预设

在实际开发的过程中，一些样式的是有规律的，可以使用less预处理器进行预设，比如实际中常用的margin和padding

.loop(@counter) when (@counter >= 0) {
.loop((@counter - 1)); // next iteration
@num: @counter * 10;
.u