Compressing CSS files can greatly reduce the size of the file and thus reduce the amount of bandwidth used every time the file is called from within a webpage.
On this blog I have talked about two tools that assist in compressing CSS files: CSS Tweak and Code Beautifier.
There are two problems that you should be aware of before using any CSS compression tool. These problems are related to editing the file.
The practical practice of editing the CSS file is hampered in several ways. When a CSS file is optimized and compressed, all the white space is removed. Thus, all the code is scrunched together. All line breaks and carriage returns are removed. When an optimized file is opened in a text editor, the text fills the screen and is difficult to read. Finding the item that needs to be edited is difficult. These problems exist even in tools such as Top Style Lite. While Top Style Lite can still find all the selectors, it cant navigate correctly to them since all the carriage returns are removed. It sees the file as one big long text sentence. It can’t find individual terms without the proper breaks and spacing.
To get around this issue it becomes necessary to have two CSS files. One that is readable yet not used “live”. The second one is a compressed version and is used in the live environment. When changes to the CSS file need to be made, changes are made to the readable version which is then recompressed. This recompressed file then replaces the current compressed “live” file. It can be a pain in the patookus.
If anyone has any practical advice please leave a comment. I am curious how others handle the editing of their compressed CSS files. I am especially interested if there is an editor that can easily read and find selectors of compressed files.
About the Author
Paul Flyer loves to research the web and find resources and tools for building, maintaining and promoting websites. Based in Saint Louis, MO, he works in management and spends his free time sharpening his web development and copy writing skills. Feel free to contact Paul with any questions, comments or ideas. He is also available to help you with your own website.
Grab Web Tools Content!
Cool Resources
I dunno. Since the whitespace compression in the CSS is what makes it hard to read, why not create a routine for when you open a compressed file?
Something like: replace all “}” with “}\n\n” and replace all “;” with “;\n\t” and replace all “{” with “{\n\t”?
This would let you work from the “live” version and it would be readable, especially if the original, uncompressed version consolidated selectors and properties.
Not ideal, but would work in a pinch…
Kerry,
I know what you mean about compression and readability. My own goal was to save bandwidth. Thanks for the tip about using a routine.