The ASI Model

( with apologies to Brad Frost )

At the heart of the way Selectoplasm handles CSS declarations is the ASI Model. It's very simple, and perhaps a little controversial, but hopefully once it's explained you'll appreciate why it exists.

The problem is that using and discussing Selectoplasm requires constant attention to three kinds of CSS declarations: ordinary properties, custom properties, and pseudo private custom properties. At this point you might appreciate the issue: as a group, these terms are confusing and verbose.

   color: blue; /* ordinary property */
   --color: orange; /* custom property */
   --_color: violet; /* pseudo-private custom property */

All the ASI Model does is rename these in a way that is efficient and memorable:

   color: blue; /* Atomic */
   --color: orange; /* Semantic */
   --_color: violet; /* Intrinsic */

That's it. That's the entire thing. (The colours mentioned are the same ones Selectoplasm uses by default to distinguish them.)

In the next section we'll go over the main function of Selectoplasm - unpacking utility classes - and you'll see why it was necessary to make this particular distinction.