Using hierarchical CSS

When reading in style sheets, cssprepare can treat them as belonging to a hierarchy. This applies a limited form of inheritance (an important attribute of object-oriented code) to your CSS, and is very useful when combined with optimised output.

Every style sheet argument on the command line will be treated as the combination of every style sheet with that filename in the hierarchy matching the current requested location.

Imagine the following directory tree:

css/site/first/typography.css containing:

body { font-family: "Palatino", serif; }

css/site/second/typography.css containing:

body { font-size: 1.2em; line-height: 1.6; }

css/site/typography.css containing:

body { line-height: 1.3; }

css/typography.css containing:

body { font-family: "Helvetica", "Arial", sans-serif; }

Running cssprepare with the option -b css/ (--hierarchy-base=css/) will cause the requested style sheet site/first/typography.css to actually be composed of css/tyography.css, css/site/typography.css and css/site/first/typography.css, as if the stylesheet were:

body { font-family: "Helvetica", "Arial", sans-serif; }
body { line-height: 1.3; }
body { font-family: "Palatino", serif; }

When output, this generates the remarkably similar:

body{font-family:"Helvetica","Arial",sans-serif;}
body{line-height:1.3;}
body{font-family:"Palatino",serif;}

However, when output in optimised form, this generates only:

body{font-family:"Palatino",serif;line-height:1.3;}

Likewise, requesting site/second/typography.css in optimised form would combine css/typography.css, css/site/typography.css and css/site/second/typography.css to produce the following (which is broken across lines simply for clarity):

body{font-family:"Helvetica","Arial",sans-serif;
     font-size:1.2em;line-height:1.6;}

This allows you to easily provide default styles for each of the aspects of your site, but to override them without incurring the unnecessary penalty of including useless, ignored rule sets in your output style sheets.

The -l (--location) option allows you to specify the location of each requested style sheet. This is useful when you are processing several style sheets in a row, such as:

-l site/first base.css typography.css colour.css \
   header.css content.css footer.css

All would be treated as if the requested style sheets were site/first/base.css, site/first/typography.css, etc.