Unpacking Utility Classes

This is arguably the most common operation of Selectoplasm, and if you go on to use it regularly, then you'll spend a lot of your time doing it, so it's important to understand what's happening.

Say you have a utility class with a single declaration:

.p1 {
   padding: 1px;
}

When you type p1 into the Component Builder's Combo Input, Selectoplasm will detect the utility class and automatically provide realtime feedback on your page, showing how your page would look if you applied this utility class to all elements that match that component's selector.

When you press Enter, Selectoplasm will then unpack the utility class (and any others you've typed into the Combo Input) into the current component.

Selectoplasm's default behaviour will unpack a utility class into both Atomic and Intrinsic declarations, so the above utility class would become:

--_padding: var(--padding, 1px);
padding: var(--_padding);

If you're not familiar with the --_ convention, check out either Lea Verou's blog post or this video by Kevin Powell. For now, here's a brief explanation of why Selectoplasm does this by default.

With the above CSS, your component is setting the padding to the Intrinsic --_padding property. Note that there is no Semantic --padding property, at least not in this example. So padding defaults to the Intrinsic's fallback, which is equal to the value in the utility class you provided. What this means is:

You can have components with default values that are restylable from OUTSIDE the component.

You could of course add a Semantic --padding property to your component to restyle it, but you can also add --padding to any element higher in the cascade to achieve the same thing. So using this method, once you've constructed your components, you can restyle them in different contexts without ever needing to modify them.

So here we've touched on a core principle of Selectoplasm - Intrinsic properties let you define defaults, and Semantic properties let you restyle components without modifying them.

And this isn't a Selectoplasm specific feature. This is just how CSS works. All we've done is organise some existing (and under-utilised) conventions.