Cascade Judo with StyleCatcher CSS

The other day, on one of MT mailing lists, someone commented on how difficult it was for the average user to edit the CSS files that are created when a style is selected for a blog using StyleCatcher. On this site we have presented an alternative which does not involve editing the files from StyleCatcher, and makes it possible to easily refresh templates without loosing all your customizations.

From CSS2 Specification : Assigning property values, Cascading, and Inheritance

Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.

On our site, we create a new template, and name the output file kinetix.css.

Then in the Style Sheet template we add a line to include our own styles. Since we import our style sheet after the StyleCatcher style sheets, any property values we define will over ride the values from the StyleCatcher files.

@import "/mt-static/themes-base/blog.css";
@import "/[...]/universal-black/screen.css";
@import "/kinetix.css";

Another advantage to making changes this way is that if we refresh templates we will only have to add one line to have all our customizations replaced.