July 26th, 2009

Build scripts for CSS

When coding CSS it is now good practice to separate out different parts of the CSS into different files.  I tend to do this in the following manner:

  • reset.css
  • layout.css
  • typography.css
  • form.css
  • core.css

I then create a stylesheet that imports all the stylesheets in.  This makes code maintenance and developing easier.

Disadvantages

The disadvantages of this approach is that the code is split into separate files and each file is then requested by the browser through an HTTP request. Therefore the more CSS files you have, the more HTTP requests are made. This can cause page loads for your user to be slower and increase the server load of your website.

Merge the files together

To decrease the amount of HTTP request the files should be merged together for live.  However, if you want to change them you still need the original un-merged files.

There are many ways you can merge files.  This includes server side solutions where files are merged on the fly.  However, a very simple solution is to create a build script using Ant.

Build scripts

When developing on projects requiring languages such as C# or Java, build scripts are normally setup.  You can then run the build script and it will compile and deploy the latest code.  In our case we want a script to copy our website and merge the CSS.

As a result, I have setup an Ant script which will copy all of your code from a development directory to a build directory.  As it copies over the files it will merge all the core CSS into one file.  As a bonus it will also minify all the CSS using the YUICompressor to reduce the size of the files further.

Download Ant build script.

How to use

  1. Download file
  2. Copy to a directory on your machine
  3. Open build.xml
  4. Edit the top properties
  5. Change the name of the files you want to merge into core
  6. Open Terminal and go to the directory build.xml is located
  7. Type ant
  8. Copy the contents of the live folder online

Edit the top properties

This sets up the location of the source directory (where you want to copy from) and the build directory (where you want to copy to).  You can also change the name of the merged CSS file.

Change name of files to merge

Here you can change the name of the files you want to be merged into the core.  To add more files copy and paste an existing line.  To remove files, delete a line.

To only merge file (not minify)

Type “ant mergeOnly”

This is a very basic script and you expand and change as you see fit.  Enjoy.

Download Ant build script.


You should follow me on twitter here

Share the love

Comments

Feel free to join the discussion, or trackback.

Mike McNally says:

Your download links don’t seem to work. They make a bear sad.

Phil says:

Hi Mike,

Thanks for letting me know. I have now updated the links to work. Happy bears all round!

Sad93 says:

What is new is the toolbox that hybrid organizations draw from. ,

Chuck Taft Asheville says:

Thanx for the brief ideas and solid solutions.

devis fenetre pvc sur mesure says:

devis fenetre pvc sur mesure…

Build scripts for CSS | We love nice things…

extra money says:

extra money…

Build scripts for CSS | We love nice things…

Join the conversation

Head of teddy bear appearing over the footer