Helpers are classes for very targeted “one-off” local overrides. They live in the last mCSS cascade layer, so they beat every other framework layer without needing high specificity or !important (your own unlayered CSS still beats them). They should be used as little as possible, but they’re useful for things like:
Designer’s request to “make an exception”
Quick fix until refactor
Temporary test/design
Let’s say the request is: “This component just doesn’t look right in that context, can we just increase the top and bottom padding?” You would use the spacing helper this way:
<divclass="myComponent pt-lg3 pb-lg3">
<p>Content goes here.</p>
</div>
Using helpers is optional and mCSS will work just fine without them. None of the mCSS components rely on them. If you do use them in your project, it’s recommended to use PurgeCSS to keep your CSS size to a minimum. For Astro users, the astro-purgecss integration does everything for you out of the box once you install it.
Below is a list of all the available helpers. mCSS doesn’t include every single CSS property like utility classes frameworks do. It only includes the ones you actually need in those “one-off” situations. I’ve never needed more than that, but I’m open to add anything that would be useful. Just open an issue on Github with your use case and I’ll add it in.