CSS is one of the major components of building websites today. I’m not exaggerating if I’m saying it is playing a role in nearly any website online in close teamwork with HTML. Both CSS and HTML have been working hard for us for many years and right now CSS3 and HTML5 are both very hot moment and adoption is going up rapidly. The combination even is expected to take over for Flash in the area of interactive and dynamic web site effects.
The increased and widespread use of CSS3 and the growing complexity of websites makes it important for developers to keep the CSS code structured and nicely formatted. Failing here will make the application hard to maintain and team development close to impossible. Automation for preparing files for production may also be worth investing in.
Further, because CSS files keeps growing in size and numbers, it is critical that webmasters focus on how to best optimize and compress CSS files to minimize download times and number of requests per page. This is done by e.g. merging similar selectors, merging files and minifying / compressing them. For production sites with high traffic this is very important while it does not belong in development where developers must be able to read and edit the code effectively.
There are some very useful tools and guidelines worth knowing when dealing with CSS. In this article I have collected some of the best I know of.
Start checking your site performance
As an example (found on Smashing Magazine) you can see what it may do to your website performance when CSS and JS files are merged and compressed.
In this example, the loading time was reduced by 33%, the transferred data size was reduced by 65% and the number of requests to the server even by 80%.
Combine all CSS files into single file
As you can see above it is important to reduce HTTP requests. It does not make the amount of data to be downloaded smaller but it is a great start. The CSS Preprocessors (see next) can help you manage this in a busy development environment. If using platforms like WordPress it is pretty hard as themes and plugins add CSS files all over the site… Good for us plugins like W3 Total Cache can automate the entire combine and minify process behind the scnene!
Consider Resource Loader for Conditional Loading of Assets
Sometimes we need to rely on “Polyfills” to provide compatibility for old browsers – meaning that resources are loaded to fill in gaps for “missing features or capabilities” in e.g. IE8. Resource loader scripts like yepnope.js (available as part of Modernizr) can be helpful here to only include extra CSS when needed. Modernizr itself is a very popular feature detection tool.
Use CSS Preprocessors for Automation and Smarter Coding
One of the problems programmers face with CSS is the lack of variables, constants and a general faster syntax. This really invites for bad coding and redudant code. Not good for minimizing CSS and lod times at all! For maintenance it is also a lot easier to have e.g. a heavily used color set in one variable (e.g. @color: #4D926F; ) and not 25 time throught the CSS code.
Since CSS does not natively have e.g. variables some clever people created preprocessors to allow the use of variables on CSS files and then use the preprocessor to parse it to regular stylesheets.
PHP is pretty popular as CMS platforms like WordPress, joomla and Drupal (and many more) have been build using PHP… So many web site programmers know and like PHP. Turbine is a CSS preprocessor made for PHP. It allow a minimal syntax, automatically gzip multiple css, fix cross-browser issues, and a lot more.
LESS is probably the best known and also oldest CSS preprocessor I know of. It extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
Sass is well known CSS3 preprocessor, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. You can try it online here.
Online CSS Optimizer Tools
While there are tools available online and I’ll share a few here you may have the capabilities already in your IDE or text editor. The main disadvantage with these tools is that automation is pretty hard. It is smarter to have the desired formatting and and optimization applied on save. However some of the tools here have nice features and is word checking out.
This very cool CSS Tool helps you create Cross-Browser CSS pretty easily, but it can also compress your code.
A cool online CSS-tool to optimize and format CSS code. Keep in mind that the code is changed in the way that the same selectors and properties are automatically merged. There is a number of different compression options raning from low (readable code) to high (not readable).
Note that your code need to have correct syntax. This isn’t a validator which points out errors in your CSS code.
You can use your own compression template if you like but I guess it is for hardcore webmasters!
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.
Offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.