Unpacking Prefixes

Now that you understand how Selectoplasm unpacks utility classes by default, let's look at how you can control what Selectoplasm does.

When typing classes into the Combo Input, there are several prefixes you can use, which each correlate to a type of property:

!: Atomic
-: Semantic
_: Intrinsic

So using our utility class from the previous example:

.p1 {
   padding: 1px;
}

Here's what your component would look like using each of the 3 prefixes:

/* !p1 */
padding: 1px;

/* -p1 */
--padding: 1px;

/* _p1 */
--_padding: var(--padding, 1px);

And since previously we learned that you can restyle a component by placing a Semantic property further up the cascade, this means that you can easily restyle a component by using the - prefix on any element higher in the cascade. With nested CSS, this might look something like:

section {
   --padding: 2px;

   article {
      --_padding: var(--padding, 1px);
      padding: var(--_padding);
   }
}

Now, our article component will default to 1px of padding, unless it's inside a section element, in which case its padding will be 2px.