最近在刷各种面试题,关于怎样写出更好的css代码,有很多的回答,在这里总结一下就当做复习,方便以后查找资料。
1、注释
不管写什么语言的代码,一个好的注释往往能使你的代码可读性更高,更清晰。
2、重置
由于不同的浏览器对样式的默认值不一样,所以需要对使用到的样式进行重置,如:
*{ padding:0; margin:0; } 不推荐用这种方式
最好是用到什么元素,就重置什么元素,如:
body,div,p,a,span,li{ padding:0; marginL0; }
如果是在移动端,需要清除tap-highlight-color的颜色和Chrome浏览器的文字最小支持12px,text-size-adjust:none;
3、避免使用全局选择符
像 *,[hidden="true"]的选择符,非常的耗时间,不建议使用
4、合理的使用标签
减少不必要的标签,因为想后代选择器这类型选择器,css解析是从右边开始的,慢慢的往左移,如果标签过多,层级也会变多,层级越多,解析的越慢。如:
div ul li .item{} div .item{} 明显第二种解析会比较快
5、设置合理的关键选择器
css的解析是从右向左,第一个选择符则为关键选择器,好的选择器,可以大大的减少查找时间。
6、使用css继承
使用css继承,可以减少代码量,如:
(1) .listitems{ font-size:20px; color:#ffffff; margin:2px; padding:5px; } .item{ font-size:20px; color:#ffffff; margin:5px; padding:10px; } (2) .listitems{ font-size:20px; color:#ffffff; margin:2px; padding:5px; } .item{ margin:5px; padding:10px; } 明显第二种方式比较好
7、抽取重复的代码
像下面的代码:
.class1{ font-size:20px; color:#ffffff; border:1px solid #ffffff; padding:12px 35px; margin:3px auto; } .class2{ font-size:20px; color:#ffffff; border:1px solid #ffffff; padding:10 4px; margin:9px auto; }
我们可以抽出重复的代码,改成下面的写法会更好:
.class1,.class2{ font-size:20px; color:#ffffff; border:1px solid #ffffff; } .class1{ padding:12px 35px; margin:3px auto; } .class2{ padding:10 4px; margin:9px auto; }
8、避免使用css表达式
9、避免使用@import
会影响css的并行加载和执行
10、规范代码
比如缩进,空格分割
11、代码压缩
参考:、
http://www.cnblogs.com/maplejan/archive/2013/05/12/3074695.html