Cassette encourages you to break up monolithic stylesheets into a collection of manageable files. This makes them easier to maintain.

The order of these files still matters. There are two ways to tell Cassette about the dependencies. It will then sort them correctly for you.

Reference Comments

Use comments at the top of a CSS file to reference other CSS files. For example:

@reference "reset.css";
@reference "fonts.css";
body {

Note that @import was not chosen because that is designed for browser-side evaluation.

Bundle Descriptor File

If you'd rather not use reference comments, then this is the alternative.

Create a file called bundle.txt in the same directory as your stylesheets.

List each CSS file name, relative to the directory. For example:


Production Mode

When your application is in production mode, the assets of each stylesheet bundle are concatenated and minified. By default, Cassette uses the Microsoft Ajax CSS Minifier.

Image URLs

Image URLs in the CSS are rewritten. For example, a file ~/styles/main.css, with the content:

body { background-image: url(img/bg.jpg); }

is transformed into:

body { background-image: url(/cassette.axd/file/styles/img/bg-25cb72e61bd5ag2.jpg);

This ensures that the URL is domain absolute and not relative to the CSS file. This matters because the CSS file itself is served from a different URL in production.

In addition, the image file hash is included in the URL. So if the image changes in future, the URL will also change. This ensures clients never see an out-of-date version of the image.

Cassette uses a custom HTTP handler to serve the image. This handler sends caching headers with the image to make browsers aggresively cache it.