前端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前端开发工具|前端最新开发工具|免费前端开发工具

» 本文来自:前端开发者 » 《前端CSS开发的项目经验》
» 本文链接地址:https://www.rokub.com/4227.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!