如何提高css编写速度

如何提高css编写速度

一、前言

　　如果你也想提高编写css的速度，那么这篇文章或许能帮到你！

二、界面

　　先看一个试例界面：

　　界面中包含3个div块(如图中红色框中所示)，并且这些div有着奇怪的class属性，实事上我并没有给div写过一行css代码，但它们确实拥有了宽、高、底色等css属性！

三、原理

　　在上面的示例中，引用了一个js脚本:zl.js，在这个脚本中我编写了类似：

regArr[ '^w([0-9]{1,4})$' ] = "width:$1px" ;
regArr[ '^h([0-9]{1,4})$' ] = "height:$1px" ;
regArr[ '^bc([0-9a-fA-F]{6})$' ] = "background:#$1" ;

　　的代码，在浏览器加载dom结束后，会将class中的 h30替换成 width:30px， 将bc00ff00 替换成background:#00ff00等等......

　　可以想象，如果匹配关系足够的多，那么需要编写的真正css就足够的少！

四、页面大时解析速度

　　当然，如果这么做，会严重影响页面的解析速度，实际上我并没有在发布的产品中引用zl.js这一脚本，而是将脚本生成的css拷贝到该页面中使用！

 

当然，团队开发不建议使用，欢迎拍砖！

 

 

 

标签:  web 前端,  css,  javascript