css优化原则

2017-02-08

如何书写更加整洁的css代码，遵循几项原则：

代码重置

总有人说你们写CSS的时候有点不道德，上来就把别人的默认padding/margin啥的都干掉了，等用的着的时候又贱贱的加上。去掉这些默认样式一个是为了后面的代码容易操作，另一方面也为消除不同浏览器默认样式不同的影响。
一般的都会包括这么几个重置：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img {
    border: medium none;
    margin: 0;
    padding: 0;
}
/** 设置默认字体 **/
body, button, input, select, textarea {
    font: 12px/1.5 '宋体', tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
em {
    font-style: normal;
}
/** 重置列表样式 **/
ul, ol {
    list-style: none;
}
/** 重置超链接元素 **/
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    text-decoration: underline;
    color: #F40;
}
/** 重置图片元素 **/
img {
    border: 0px;
}
/** 重置表格元素 **/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

使用缩写

缩写可以减少css文件的大小，并增加可读性和可维护性。然而并非所有值都可以缩写，浏览器读取缩写时，会将所有项都设置一遍，会消耗一定的性能。常用缩写包括：

/*盒子模型缩写*/
div{
    padding:10px;/*4个内边距均为10px*/
    padding:10px 20px;/*上下均为10px,左右均为20px*/
    padding:10px 20px 30px;/*上下分别为10/30px,左右均为20px*/
}
/*16进制颜色*/
li{
    color: #000;/*原色#000000*/
    background-color: #389;/*原色为#338899*/
}
/*字体*/
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;/*至少指定size、family*/
}

不需要全部属性都设定时，尽量不用缩写，比如：

1	div{margin-left:auto;margin-right:auto;}/不考虑上下边距，仅水平居中/

避免性能消耗属性

expression表达式/filter滤镜，这两者再IE中已经得到较好的支持，但确实是个耗性能的属性，谨慎使用，除非需求要求，比如再opacity（透明度）时，兼容ie6~8必须使用filter，这时需求大于一切。

选择器合并

选择器合并已经是常见的基本代码规范，再相同功能，如background采用同一张图片时，可将选择器合并，避免同一种属性反复写，默认属性重置也是这个道理。

1
2
3

div .first,.second,.third,.fourth{
    background:url(../xx/xx.png) no-repeat 900px 900px; 
}

CSS做更多的事情

能用CSS实现的事情，尽量避免使用js。

再不兼容低版本浏览器的情况下（移动开发），完全可以采用CSS3的动画等来实现，而不是采用js。
视觉变化，使用CSS控制className
设置多节点样式，避免使用js时的浏览器多次渲染耗性能

清晰的注释

将每一个模块用注释隔开，增加可读性。哪怕是header/nav/footer这样简单的分隔。

压缩

套用工具喽，比如gulp，将多余空格去除。