CSS压缩:技巧与工具

作者:神采飞扬 来源:前端观察 时间:2009-12-11 18:26:00 

学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求,尤其对于大型网站来说,这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。


很多人都有代码洁癖。这不是件坏事。

本文将整理集中你可以用来优化你的CSS的技术,以及一些可以自动压缩你的代码的在线和桌面压缩工具。

压缩还是不压缩

在我们讨论如何压缩CSS之前,需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲,而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师,你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站,可能就没有必要做额外的压缩。同样,如果你在编写需要和一个开放团队分享的代码,插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而,如果你在设计一个需要大量CSS的大型网站,你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间,但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时,很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿,让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式,丢掉它。不要借口稍后或许会用到,你也知道它们是杂乱的。除非你有一个合理的理由,否则不要添加它们。

缩写

CSS缩写是一种将多行CSS合并到单行的方法。 养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子:

长写版本:

#container{    padding-top:5px    padding-right:10px    padding-bottom:30px    padding-left:18px}

缩写版本:

#container{    padding:5px 10px 30px 18px;}

了解更多CSS缩写技巧,可以访问下面的文章:

标签:压缩,css,技巧,工具
0
投稿

猜你喜欢

  • python使用Tesseract库识别验证

    2023-05-06 12:31:51
  • asp连接各种数据库代码

    2008-03-11 11:16:00
  • Python使用Flask-SQLAlchemy连接数据库操作示例

    2024-01-27 10:34:36
  • 在pytorch中动态调整优化器的学习率方式

    2022-08-14 00:30:57
  • Python接口测试环境搭建过程详解

    2021-08-31 16:12:52
  • python计算时间差的方法

    2023-05-19 16:08:23
  • Python的numpy库下的几个小函数的用法(小结)

    2021-12-13 10:29:33
  • 深入讨论Python函数的参数的默认值所引发的问题的原因

    2022-08-03 00:54:31
  • 小程序点餐界面添加购物车左右摆动动画

    2024-04-27 15:22:36
  • Django RBAC权限管理设计过程详解

    2021-09-02 03:57:07
  • Python 爬虫多线程详解及实例代码

    2021-01-25 14:05:03
  • 基于Python 装饰器装饰类中的方法实例

    2023-10-11 04:10:22
  • tensorflow实现从.ckpt文件中读取任意变量

    2023-01-04 15:39:40
  • 一文带你搞懂Golang依赖注入的设计与实现

    2023-07-23 14:33:53
  • Python任务自动化工具tox使用教程

    2022-08-28 12:33:58
  • flask SQLAlchemy连接数据库及操作的实现

    2024-01-28 09:23:29
  • asp如何制作一个小巧的购物车?

    2010-07-07 12:25:00
  • Python中扩展包的安装方法详解

    2021-09-19 23:35:46
  • Python OpenCV实现图像傅里叶变换

    2022-06-19 04:43:55
  • ASP进阶学习之认识数学函数

    2007-10-08 13:15:00
  • asp之家 网络编程 m.aspxhome.com