Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Spray is a straight-forward, lightweight, modular CSS loader.
branch: master
Failed to load latest commit information.
samples Refined a few functions. Now using prototypes rather than individual …


by Joseph Ammil Descalzota

Spray is a CSS module loader, loaded JSONP-style.

It also allows for:

  • Dynamically loading of CSS styles - call your styles from anywhere
  • Modular CSS - group your CSS styles by the dozen
  • Allow activation and deactivation of module styles - like putting a switch to your styles


Just include spray.js anywhere before using! For base styling, it's recommended you load it in the head, along with the Spray calls to prevent Flash Of Unstlyed Content (FUOC).

Style syntax

It uses the same CSS syntax but in JSON format. It's best to wrap the selectors, properties and values in quotes.

    "selector" : {
        "property" : "value",
        "property" : "value"

Applying the style:

JavaScript object

Just wrap the JavaScript object containing your style in a spray() call like JSONP.

    'div.selected' : {
        'text-decoration' : 'underline',
        'color' : 'red'
    'a' : {
        'text-decoration' : 'none'


Similarly, you can wrap a valid JSON string and Spray will readily parse it as well.

spray('{"div": {"background": "green"}}');

Manipulating the CSS Module:

Spray hosts a few methods to manipulate the style module.

  • .style() - Applies the styles of the module to the page. By default, a call to spray() will apply the style to the page instantly.
  • .unstyle() - Removes the styles of the module to the page

Here's sample code for usage:

var sprayModule = spray({
    'div.selected' : {
        'text-decoration' : 'underline',
        'color' : 'red'
    'a' : {
        'text-decoration' : 'none'

sprayModule.unstyle(); //deactivates styles declared in that module;   //activate the styles declared in that module

Other methods and properties include:

Standard Array methods:

  • .length
  • .splice()
  • .push()

Self-implemented methods mimicked from jQuery

  • .each(function(index,valueAtIndex)) - loops through each style in the Spray object and runs the callback provided.

Why I Built Spray

  • Dynamic <link> have fuzzy cross-browser load or error support.

  • AJAX, except for CORS, aren't cross-domain. Even CORS itself isn't widely used, is an overhead (at least 2 HTTP requests), and needs server-side configuration.

  • Dynamic base styling. Most 3rd party libraries like jQuery's .css() applies styles inline. This means if another call to .css() overrides the style, the original style is lost.

  • Traditional "CSS in the head" is bulky. Some might not be used at all.

  • I'm tired building that "body class switcher" technique for easy theme switching.

  • Besides those stated above, I am working on a project which uses a very crappy website back-end. I managed to inject a bootstrap code into it and needed to load CSS in a modular fashion and make it editable on the fly.

Current issues with Spray

  • It's still a work in progress, founded from a "Eureka moment while asleep".

  • Currently, it doesn't do validation. It's up to the user what he/she injects using Spray.

  • Bypassing the same-origin-policy has it's security issues. Basically, Spray is JSONP, and have the same risks.


Released under the MIT license.

Contact Me

Something went wrong with that request. Please try again.