2.有意义的命名
一些无意的命名和自以为是的命名,让项目组的其他人员看了都会有发癫的。
就像下面这种命名:
.aaaa1{width:210px;} .aadd2{width:220px};
我估计一般人应该不会在项目里这样来命名class的。
还有最好不要使用元素的特性来命名class和id如(颜色,位置,大小等等)。
如:
<h2>我是 <span class="red">标题</span></h2>
如果要把原先设置为红色的所有字体改成蓝色 那么修改以后的样式就会变成:.red{color:bule;},是不是让人看上去很是别扭! 当然还有另外一种情况,一些固定的样式,定义后就不会修改的了那我们就不用去担心这种情况了。
3.样式代码缩写
CSS代码缩写不仅可以精简代码量还可以提高代码书写速度。在CSS里面有很多可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您掌握了代码缩写,原本一长串的代码:
p{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
}
就可以简化为:
p{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding: 10px 5px;
}
还有你可以合并多个CSS选择器为一个,前提是要他们有共同的样式。这样不但代码简洁且可为你节省时间和文件空间。
如:
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }
h4{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }
可以合并为
h2,h3, h4{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }
如果页面中父元素的多个子元素使用一样的样式,那么就可以把一样的样式定义在父元素上,让子元素继承父元素的CSS样式。这样既方便维护你的代码,且可减少代码量。