前端CSS开发的项目经验

动态前端开发工具|ws 前端开发工具|前端实时可视化开发工具体验

1.提出公共样式
新来一个项目，作为前端，会有需求文档和一系列的psd，看着psd你一定会发现很多相同的样式，最普遍的就是 头部以及底部，那么将这些公共样式提出到一个common.css里面就是很有必要用的了，当然了，我相信99%的前端都会这么做，不是吗。

2.css模块化

这是第一个项目的css，问题是不是很多。这里先来讲一点就是我用了id，把一个页面分成N个视图，每个视图都给一个id，然后在这视图下面的所有样式前面都带一个这个视图的id，看起来是不是很棒，可是一个css文件里面带这么多的id真的好吗？ 答案是不好，为什么在css里面写id是不好的呢 这一点 我也不清楚，不过有一点就是id是用来给js用的。我现在用的方案是css文件里面不出现id，给每个页面一个根据页面含义比如登录页就给一个regist作为前缀，然后和之前一样给每个页面分成N个视图，每个视图的最大的父容器都给一个页面前缀作为class的一部分，后面的部分用这个视图的含义，比如.platform-trend 就是因为这个页面是工作台页面所以前缀是platform 而后面的trend则代表这个视图的含义表示趋势，那么这个视图里面的所有class前面都带这个视图类名就好了。

3.编写执行效率高的css

还是这张图，有没有发现有很多红色的，那是标签名，比如a，li，span ,可是我们都知道css解析是从右往左的，所以这样的代码执行效率注定很低，所以做好的办法就是尽量少写标签名，只写class名，还有就是html结构不要超过4层，写的css嵌套最好在4层之内，第二点模块化是不是对这点也有帮助呢，模块化了，向上查找的层级就少了。

4.提出某个样式共通的样式
一点项目里面按钮有很多，也有很多是有相同的地方，比如背景色，圆角，字体颜色，鼠标移入变化等等就比如下面的2个按钮

那么就可以想下面这样提出公共的，然后组合起来用，是不是很方便尤其是项目越做越大，这一点方便性就会越来越明显，所以考验一个前端CSS项目组织能力的一个标准就是随着项目深入做下去，静态模板是不是做起来越来越轻松。

netbeans前端开发工具|前端最新开发工具|免费前端开发工具