Author: 帕兰 We have already looked at 8 online CSS optimization tools and CSS code streamlining tricks; this article brings you 18 CSS minification and compression tools and tricks.
To Compress or Not to Compress
Before we discuss how to compress CSS, we should note that there is often a balance to be struck between compression and code readability. Many coders take pride in clearly organized CSS and do not want their code stripped of comments and line breaks by a compressor. As a designer, you should analyze the goal of the code you are writing. If you are creating a small site that needs only a few lines of CSS, extra compression may not be necessary. Likewise, if you are writing code that will be shared with an open team, inserting extra comments and line breaks can save your colleagues a great deal of time and earn their genuine thanks. However, if you are designing a large site that requires a lot of CSS, you will certainly need to watch your file size and keep it as small as you can. Finding the perfect balance between compression and readability may take some time, but both are worth exploring, and striking that balance can make your work much easier. At the same time, it is clear that compression does not necessarily reduce readability. Many of the techniques available for compressing code produce better, more organized code. With that in mind, let’s start looking at some techniques for keeping CSS files minimal.
Empty Style Definitions
Let’s start with the obvious one. If you have an empty style, throw it away. Don’t make excuses that you might use it later — you know as well as anyone that they are just clutter. Unless you have a good reason, don’t add them.
Shorthand
CSS shorthand is a way of merging multiple lines of CSS into a single line. Getting into the habit of using every shorthand trick you know can noticeably reduce the number of lines of code you ultimately write. Here is an example: Longhand version:
#container{
padding-top:5px
padding-right:10px
padding-bottom:30px
padding-left:18px
}
Shorthand version:
#container{
padding:5px 10px 30px 18px;
}
To learn more CSS shorthand tricks, you can visit the article below: 
Also recommended is 阿捷’s article: “A Summary of Common CSS Shorthand Syntax“
CSS Sprites
The original idea behind CSS sprites is to reduce the number of HTTP requests in order to speed up page load time. Sprites achieve this by combining multiple images into a single image file, usually an image in grid format. Each individual image is displayed by shifting the background-position of the large sprite image. For CSS code, using sprite techniques can greatly improve code reuse and maintainability, which noticeably reduces the amount of CSS code.
