As CSS becomes more and more the key to website design, it’s no surprise our code gets more and more lengthy. In a recent project I was working on, the CSS code across four stylesheets was larger than the content of the homepage. Obviously, this wouldn’t do.
CSS is quickly growing in popularity and new tools are being added to the supported features list all the time. For example, CSS transitions are quickly becoming a huge part of web design and allow a whole new level of interesting options. But transitions require a great deal of new code to be added.
So how do we decide as designers when we need to use validation and compression tools to improve our code? If we do decide to compress, what tools are available? I’ll address these considerations and offer some free, top-notch tools for validating and compressing your CSS, should you decide that’s the best route for your design.
Should I Validate My CSS?
If you really have to ask this question, I may need to come over there and kick you in the shins. Of course you should validate your CSS! The question is not should you validate, but “how” to validate. You can use built-in CSS validation in software like Dreamweaver, but below I’ll show you an even better approach that doesn’t take a lot of time. You get the most up-to-date validation and feedback about what’s broken.
What Is CSS Compression?
The first question that usually comes up is, “Should I compress my CSS?” and it’s actually the wrong one. The first question you should be asking is, “What does compression do to my code?” Some forms of file compression require the client side browser/computer to perform a lot of extra work, which can speed up download speeds but put a burden on the client computer.
CSS compression simply removes extra content that isn’t necessary from your stylesheets. For example, line breaks and unneccessary white space are two simple factors that can cause you to double the size of your CSS documents. You may also be using multiple stylesheets, which cause your client to make several unneccessary HTTP calls, so putting all your code into a single stylesheet will be helpful.
If you haven’t seen this yet, let me spell it out for you: CSS compression means you give up easy-to-read code. You’re going to lose your comments and line breaks, and the end result is usually a wall of text.
Do I Need to Compress My CSS?
Now we can ask the question about whether or not you need to compress. How big are your stylesheets before compression and afterwards? If you go from 200k to 15k, then you’ve made a huge difference in your load time and you should strongly consider compression. If you only see a 10% difference from compressed to uncompressed CSS, then you may not want to give up the readability you lose.
Working Around Compressed CSS
The easiest way to work with compressed CSS is to save your uncompressed CSS files and re-compress after any changes. So your working code keeps line breaks, comments, and other factors that make it easier to read. Once you’ve made changes, simply compress and make sure your page calls the compressed version.
So, without further ado, here are some of the best CSS validation and compression tools on the web:
Lots of CSS validation tools are available, but my favorite is at the source of CSS definitions: W3.org. These folks define what is up-to-date and valid CSS, so you can’t go wrong. You can use a URL or upload your files directly. Using the “More Options,” you can define what level of CSS you want to validate and other useful features like error reporting priorities. Hands down, this is the best on the Net and I don’t use anything else.
One of my favorite CSS compressors is found at CSS Drive. The site gives you the option of various amounts of compression from light to super-compact. You can also choose whether or not to strip comments, which is nice if you want to see how keeping or losing comments might help your compression. Just choose your settings, paste your code, and go.
If you’re looking for lots of options and even template-driven compressed CSS, CleanCSS is my choice. You have a lot more features at your disposal and you can do all kinds of optional compression. It’s much more feature-heavy and takes more time to kick out compressed CSS, but if you have special needs, CleanCSS can get the job done.Tags: css, CSS Validation, tools