Sharing styles

Ideally, this is how I would imagine our CSS structur, on all our pages, on all our websites.

<link rel="stylesheet" href="reimagine.css">
<link rel="stylesheet" href="application.css">
<link rel="stylesheet" href="context_specific.css">

reimagine.css

Organization of reimagine.css

One single file for all the apps, defines styles shared across the apps.

Does not get included in another CSS file.

application.css

Website specific, but included in all the pages of that website. Defines styles shared across the pages of a site.

context_specific.css

This one styles what can not be styled by what is in application.css. "context" can be a portion of the site, scoped to all the actions of a controller, or something else...

note: context_specific does not really have to exist if it does not make sense. I can easily imagine them being small enough to just be included at the bottom application.css (eg, challengepost.com where we don't have a lot of page specific styles.)