CSS files can get messy. There are those talented enough to think through their HTML design in order to reduce the amount of CSS code needed. However, for most of us, or maybe just some of us, our CSS files get bulky. Bulky CSS files take up space. Lots of space means extra bandwidth. Extra bandwidth means money.
The goal of CSS optimization is twofold. First, it is meant to cleanup some of the CSS code in order to reduce the number of selectors and/or properties. Second, it simply is a means to remove the whitespace from a file in order to reduce its size.
The second goal is the one most sought after. The first is sometimes difficult to accomplish with a tool.
There are several tools out there that can accomplish these tasks. I will recommended two.
CSS Tweak is a beginner friendly tool that is excellent at removing the white space from a file without changing any of the code. CSS Tweak has the ability to tweak fonts, borders, backgrounds and lists, but its main use is for removing comments, zero units and white space. I suggest beginners focus on simply removing the white space in order to reduce the size of their files. Focus on the actual code once some confidence is gained in writing CSS files.
Advanced users may want to use Code Beautifier. While it removes white space just like CSS Tweak, it contains more power features. Code Beautifer can change the case of all selectors to reordering all your selectors (beware this can affect the output of your CSS code!). Power CSS writers may find more to appreciate about CSS Beautifer but they better be careful!
Each of the above tools is highly recommended. Play around with a scratch copy of your CSS file. Select a feature at a time to see what each accomplished/changes.
In the end, I believe, the main goal of CSS optimization is to reduce your whitespace so you can reduce the size of your CSS file. Reducing the size of your CSS file will save on bandwidth and may have an affect on the speed of your website.
