Debug panel

Close debug panel
Roma’s Unpolished Posts

CSS Mixins Everywhere

Published on:
Categories:
CSS Mixins, CSS Overrides 5, CSS 64
Current music:
kinoue64 — tomorrow, the world will end.
Current drink:
Herbal tea (“Tisane Fruits exotique”)

On Monday, I published a new article: Pure CSS Mixin for Displaying Values of Custom Properties. It is a long one, but you don’t have to read it fully to get something out of it, as I also published an npm package that allows you to use the mixin described in the article right away.

The mixin itself is for debugging stuff, and one way I envisioned it being used: have a template on CodePen that would include the mixin. Not super convenient (need to pre-select the template, can’t be used with other pre-existing CodePens, etc.), but works. It is also possible to just drop the import of the mixin anywhere if you need it:

@import
	url("https://unpkg.com/@kizu/mixins@0.1.3/preview.css");

I also included it in this blog, though, importing from node_modules instead of using the CDN. So now it is possible to preview any values here as well:

<div style="--preview: pi"></div>

But then… I wondered. What if this mixin was available everywhere in my browser?

I am a fan of CSS overrides in general, and I am using the Stylus extension for this (for Firefox, for Chrome).

What if I would just… add a global override that would be available on every page, and will include the mixin? Now I can just open devtools on any page, add --preview to any element, and “inspect” any values! Or, when doing stuff in a CodePen, I can just use --preview as if it were available natively for me.

Of course, this will be something visible only to me, so if I would want to share such a CodePen with the previews visible, I would need to remember to include the mixin itself as well. But — for the most part, this mixin is purely for debugging. So why not have it available always?

This is the power of CSS mixins: if they do not do anything until you call them, we can always add them and use them when we see fit. A mixin like --preview becomes like a custom browser extension, made with just CSS!

And imagine when we will have native CSS mixins! We could do the same with them: include them always via overrides, and use them for debugging on any page.

Finally, this can be a great way for me to test how robust the mixin’s code is: does it introduce any performance overhead? Will it break in some cases? How annoying is it to have its styles always there in an inspector? Do I want to scope it in some way for this kind of usage, so I would have to add a custom class around something I want to debug?

I am excited to try this out, and adjust the mixin with what I will find. And if you will try this method as well — you’re welcome to, but be warned that it is highly experimental. But then — please, let me know if you have any feedback about it!

Please share your thoughts about this on Mastodon!