之前参与的开发项目,写的前端代码,css部分重复利用率很差,以至于写到最后的页面,完全无法重复利用之前的css代码,导致整个css文件代码量很大,相对来说,废代码就非常多。
想了想自己在项目中的问题,总结一下:
html部分:过度的使用div,语义化标签使用太少,大部分都是用div模拟的。过度的div并不是一个好的习惯。
css部分:
1,使用了较多的id作为选择器。 //id因为其优先级过高,在重复利用css代码时,id元素的子元素布局就会受到很大的影响。
2,每一个标签都使用的单一class,没有css的组合使用,大大降低了css的代码利用率。//这个也是受id选择器用的过多的一个结果。
3,css使用的深度太大,如".a .b .c .d .e{//css code}",这样的写法,也影响了组合css的使用。
4,最二的是,用了元素的选择器(.a div{//css code}),导致其子元素中,所有的div元素都集成了这个div的特性,影响所有div子元素的布局,开发过程中,发现问 题,并做了改正。
通过了项目中发现的不足,也看了下css代码的规范,可以这么说:
为了便于css之后的维护,最好能把样式分为几大块,显然,常常把最一般通用的的规则放在最前面,之后是处理更特殊的样式和辅助样式,这些是在整个站点中使用的一般类,包括表单,错误消息等方面,最后,处理布局和导航灯结构性元素。
整个文档的结构可以这样:一般性样式:
主体样式
reset样式
链接
标题
其他元素
辅助样式:
表单
通知和错误
一致的条目
页面结构:
标题,页脚和导航
布局
其他页面结构元素
页面组件:
各个页面
覆盖样式
上面的这些说法看起来比较简单,但是如何能在开发的过程中,写出更好的css代码,还需要多多努力,需要慢慢进步。
对于复杂的项目,在css文件中添加临时的注释,常常对开发有帮助,这些注释可以提醒你在启动前需要完成哪些工作,或者提醒你提供列宽度等常用值的查询表。
我自己的想法是这样的:
css代码是越细致,越合理好?那组合的利用css,是不是就让代码变得复杂?对于之后的维护工作,是不是就变得艰难?
单一细致的css代码,维护修改都变得简单,但是代码量会加大很多。
组合css代码,会让规则变得复杂,维护麻烦,但是代码量会减少很多。
如何去平衡这两个方面呢?
小的站点,用单一的代码,因为css代码量相对较少。
大的站点,门户网站,用组合代码,因为要考虑访问量,以及渲染时间,组合虽然加大工作量,以及维护难度,但是对于用户体验,渲染时间等,都是很有用的,所以应该使用组合的样式,我这么认为。
这些都需要在以后的工作学习中,进行实践,对比出更优的方法。