css学习之——怎样写出更好的css

最近在刷各种面试题，关于怎样写出更好的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