教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

UI培训之如何精简优化CSS代码?

更新时间:2016年03月09日15时52分 来源:传智播客UI培训学院 浏览次数:

1.简化注释语句
很多时候,为了增加可读性,开发人员会喜欢写多行注释,注释语句当然没有问题,但在 CSS 中他们会增大 CSS 文件的大小,应该尝试简化。
这样在保持可读性的同时,减小了文件大小。事实上,在一个真正发布版本的 CSS 文件中,你完全可以去掉这些注释。

2.简化颜色代码
在 CSS 中,我们经常会跟十六进制颜色代码打交道。很多人可能习惯于写成以下的语法格式:
color: #ffffff;
color: #ff88ff;
事实上,在 CSS 中是可以简化这个写法的,我们可以写成:
color: #fff;
color: #f8f;

3.使用单行属性代替多行属性
在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置,例如:
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
 我们可以写成:
padding: 10px 0;
对于其它缩写方法,可以参考网上一些资料。当然,我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习,它会给出具体提示。

4.当值为 0 时可省略掉单位
padding: 0;

5.同时设定多个元素的属性
例如:
h1 {
    margin: 0;
    padding: 0;
}
h2 {
    margin: 0;
    padding: 0;
}
更赞的写法是这样:
h1,h2 {
    margin: 0;
    padding: 0;
}

6.删除空白和换行
这是个很不起眼的操作,但对于脱离了开发阶段,而要应用在网络上的 CSS 而言应该进行这样的处理,举个例子:
h1  {
    margin: 0;
    padding: 0;
}
应该处理成:
h1{margin:0;padding:0;}
事实上,在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性,我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作。

7.可删减的选择框架的样式库

很多时候,我们在开发的过程中,为了提高效率会去选择框架或者组件快速的实现我们的效果,但是问题来了,这样直接引用的结果会导致很多样式的冗余,我们在使用的过程中并不会全部用到样式库里的样式,所以,我们应该尝试着去自定义框架或者组件的样式库,把没有调用到的样式删除以此来减小我们 CSS 文件的大小。


本文版权归传智播客UI培训学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客UI培训学院
首发:http://www.itcast.cn/ui 

0 分享到:
和我们在线交谈!