CSS代码优化

2013-01-04
  • 850
  • 0

CSS的代码优化对于页面的加载以及表现十分重要,css缩写和减少代码也是css代码重用的优势体现!

代码优化一般可以从以下几个方向入手:

1,增加代码重用率

CSS样式在编写的过程中往往从在很多冗余的代码,出现诸如代码雷同,重复出现的情况,所以页面一定要在编写的时候对尽可能可以重用的样式重用!

2.样式覆盖

如果多个元素使用了多个样式代码,如下代码

.div1,.div2,.div3{ font-size:12px; padding:10px; }

.div1{border:1px solid #fff}

.div2{border:1px solid #ccc}

.div3{border:1px solid #eee}

针对上述代码我们可以对border的内容就行复写,

.div1,.div2,.div3{ font-size:12px; padding:10px; border:1px solid #fff }

.div2{border-color: #ccc}

.div3{border-color: #eee}

第二段里因为css后一段代码会对前一段代码就进行覆盖,所以我们在第一段里设置了颜色,而后面只需设置div2,div3的颜色从而简化代码

往往在实际的网站开发过程中,上述的方法会非常有效,除此之外我们可以根据网站的需求及样式,编码方式分别对待,最终也是为了将代码简化合理.