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缩写技巧，可以访问下面的文章：
0
投稿猜你喜欢
在这一部分，我们学习创建状态栏，菜单栏和工具栏。一个菜单是位于菜单栏的一组命令。一个工具栏有一些按钮，这些按钮在应用程序中拥有一些常用命令。- 前言图像处理技术是计算机视觉项目的核心，通常是计算机视觉项目中的关键工具，可以使用它们来完成各种计算机视觉任务。在本文中，将介绍如何使用 O
- 本文实例讲述了Python中类的创建和实例化操作。分享给大家供大家参考，具体如下：python中同样使用关键字class创建一个类，类名称第
- 下面给大家提供几个函数参考。实例一：<?php function deletedir($dir){
- 概述在我们使用内置打印函数print时，打印出的Python数据结构对象总是一行的输出的方式，这样对数据结构较复杂或数据较多的对象的显示并不
- 字符串占位符的"{0:2}"看到这么奇怪的占位符，估计都是一脸懵逼。而且网上搜不到。其实很简单，试一下就知道了。prin
- 这个url的正则表达式判断的js！是比较全面的。它验证的情况包括！IP，域名（domain），ftp，二级域名，域名中的文件，域名加上端口！
- 背景：先说一下应用吧，一般我们进行网络训练时，都有一个batchsize设置，也就是一个batch一个batch的更新梯度，能有这个batc
- 一、现象凌晨对线上一张表添加索引，表数据量太大(1亿+数据，数据量50G以上)，造成主从延迟几个小时，各个依赖从库的系统无法查询数据，最终影
- 正则表达式是处理字符串的强大工具。作为一个概念而言，正则表达式对于Python来说并不是独有的。但是，Python中的正则表达式在实际使用过
- 最近博主在边学flask边写测试平台，碰到一个比较常用的场景如下图所示这里有一个输入框组，下拉菜单里面有3个选项，还有一个输入框，代码是用
- 没有gpu,改用cpu跑代码以为很麻烦的修改，很大动干戈的改动，以及无止尽的报错，结果，就改动代码中的device就OK了，惊不惊喜，意不意
- 最近一个vue和element的项目中遇到了一个问题： 动态生成的对象进行双向绑定是失败直接贴代码： <el-form :model=
- 题目内容：对于三角形，三边长分别为a, b, c，给定a和b之间的夹角C，则有：。编写程序，使得输入三角形的边a, b, c，可求得夹角C(
- python代码有一行标黄鼠标放在标黄的代码行会显示This code is unreachable（此代码无法访问）def do_teln
- 一，VSCode微软出厂的高颜值编辑器VSCode官网1.加载大文件几乎秒开，运行速度很快2.跨平台的文本编辑器，内置了对许多主流语言的支持
- Python的装饰器的英文名叫Decorator，当你看到这个英文名的时候，你可能会把其跟Design Pattern里的Decorator
- 1.下载安装pyqt5工具包以及配置ui界面开发环境pip install PyQt5pip install PyQt5-tools2.点击
- 小引 笔者认为web开发包括设计html，javascript,css，以及一种高级语言，比如c#,java等等，本文分为三部分，第一部分为
- 例如<div id="info"><span><span class='pl
