Stylo

A micro library for updating styles for thousands of elements via a dynamically created/updated stylesheet (for fast performance), instead of applying inline styles to each element.

Below are 6,400 blocks with randomly assigned classes, from a to g. Clicking on the grid dynamically updates the Stylo stylesheet with a new set of randomly chosen colors for each class. This lets the browser take care of applying the correct style for each element rather than applying the correct styles individually for each element.

Using Stylo is simple, just create an instance, setup all your rules and then call the update function to update the stylesheet. See below for a slightly simplified version of the code that updates the grid.

var _stylo = new Stylo();
_stylo.addRule
(
  ".a",
  {
    "background-color" : "#fff"
  }
);
_stylo.update();

Which produces the following css:

.a
{
  "background-color" : "#fff";
}

Simples! Aleksandr Orlov