Update June 7, 2018 - Hall of Shame

This article is a Hall of Shamer™ because, while the idea was on point, CSS Modules and other modern tools have displaced it.

Introducing StyleManager, a JavaScript library to manage styles in the browser. StyleManager works by creating style tags in the browser and providing an API to interact with it accordingly. StyleManager is intended to be used as a build target or leveraged using the provided AMD plugin.

One of the biggest problems in web application development is CSS. While CSS is strides ahead of markup driven styles it is still under featured for desktop class applications. The language is rigid and difficult to maintain. In fact your only real defense for maintaining CSS properly is a lot of discipline and perhaps a CSS pre-processor. As an application grows, the separation of your stylesheets and your features becomes blurry. The trouble is that a great deal of JavaScript driven components simply don't work without their corresponding styles and due to the separation of concerns we still load our stylesheets entirely separate from their corresponding features. We lazily load features in JavaScript, but load their styles up front. We specify our JavaScript dependencies, but not their corresponding stylesheets that are required to function properly. Why?

StyleManager aims to empower developers to control that fine line between shared styles and feature specific styles. It is my contention that feature specific styles should be loaded just like the feature's other dependencies. StyleManager is also a great build target for those who would like to compile their stylesheets and templates to a JavaScript consumable target.

Get It

StyleManager on Github

An Example

Below you will find two examples, one using the StyleManager AMD css! plugin and the other using StyleManager as a build target.

AMD Plugin

define(["css!dialog.css", "ui/View"], function (styles, View) {
  // The contents of dialog.css will be added to the page
  // by the time the module definition function is called
  // you can interact with the stylesheets using the
  // styles parameter
  return View.extend({
    render: function () {
      // ...
    },
  });
});

StyleManager - As a build target.

StyleManager is intended to be leveraged as a build target or using the AMD plugin. You could grab the contents of some-feature.css as it corresponds to some-feature.handlebars and precompile both accordingly.

define(["handlebars", "StyleManager"], function (Handlebars, StyleManager) {
  var sm = new StyleManager("some-feature.css");

  sm.register(
    "feature",
    "/*some-feature.css contents*/ .dialog { position: absolute; }"
  );

  var template = Handlebars.precompile(
    "/* some-feature.handlebars contents */"
  );

  return template;
});