Managing Themed CSS

Let's take a hypothetical sports network with, say, 300+ individual team sites hosted on it. While all of these team sites have the same basic front-end, each team community applies its own custom skin of colors and graphics. Behind the scenes, this is done with one base stylesheet shared by all sites, and then a small theme-specific stylesheet applied for each community.

While this approach is simple, it's also unwieldy. Changes to the base stylesheet must be mirrored in the theme override, which is painstaking to manage and leads to cruft. So, we've been putting a lot of thought into this community theme problem while planning the future of Vox Media platforms. Our ideas have ranged from compiling full assets for each community, to establishing a full-on asset service layer.

Ultimately though, we've kept coming back to the simplicity and slim efficiency of a theme stylesheet. The system has worked well enough in the past, now we simply needed a better way to manage it. Our ideal scenario would be to simply extract a theme stylesheet from our base styles library. Could this be possible?

Extracting Theme Styles

Using a technique of lexical analysis and source reduction, we can start pruning our base style library down into a minimal set of theme-specific style rules. Take the following Sass:

$theme-color: red;$other-color: black;.wrapper { color: blue; .theme { color: $theme-color; font-family: serif; } .other { color: $other-color; font-family: serif; }}

Knowing that we only want to retain styles that specifically implement theme variables, we can aggressively prune this source:

$theme-color: red;$other-color: black;.wrapper { // removed declaration .theme { color: $theme-color; // removed declaration } // removed ruleset}

Taking this a step further, we can even run this reduced source through the Sass processor with variable names preserved, generating a CSS template for our theme stylesheet:

.wrapper .theme { color: <%= @theme['theme-color'] %> }

Wrap

This technique has shown great promise in our endeavor to simplify the creation and maintenance of theme stylesheets at Vox Media. Our complete parsing framework is available through the open-source project, Sass Thematic. Feedback and contributions are welcome!

Also, a special thanks to @tonyganch for the fabulous open source gonzales-pe lexer, which provides the cornerstone of this workflow.