CSS优化,有哪些提升性能的方法?
CSS优化包括很多方面。写CSS简单易行,但是要写出精炼的CSS代码还是有很多技巧的。顺便说一句,请纠正我的错误:
1.避免过度约束。
// 糟糕
ul #导航{..}
//好的
#nav{..}2、后代选择器最差。
// 烂透了
Html div tr td {..}3.避免链(交叉)选择器
// 糟糕
. menu.left.icon {..}
//好的
.菜单-左侧-图标{..}
4.使用复合(紧凑)语法。
// 糟糕
.某个阶层
padding-top:20px;
填充-底部:20px
左填充:10px
右填充:10px
背景:# 000;
background-image: url(../imgs/carrot.png);背景-图像:url(../imgs/胡萝卜. png);
背景-位置:底部;
背景-重复:重复-x;
}
//好的
.某个阶层
填充:20px 10px 20px 10px
background: #000 url(../imgs/carrot.png) repeat-x bottom;背景:#000网址(../imgs/胡萝卜. png)repeat-x bottom;
}
5.避免不必要的命名空
// 糟糕
.someclass表tr.otherclass td.somerule {..}
//好的
.some class . other classtd . some rule {..} 6.避免不必要的重复
.someclass {
颜色:红色;
背景:蓝色;
字号:15px
}
.其他类别{
颜色:红色;
背景:蓝色;
字号:15px
}
//好的
.某类。其他类别{
颜色:红色;
背景:蓝色;
字号:15px
}7.最好使用语义名称。一个好的CSS类名应该描述它是什么而不是它看起来像什么。
8.避免!重要的是,其实你也应该会用其他高质量的选择器。
9.尽可能简化规则,可以进一步合并不同类别的重复规则。
好了,我总结一下这9点。有什么好的规则就贴出来~ ~ ~