Simon.CSS: animations, native mixins, and the most cursed CSS framework ever to exist

There are discussions about native mixins in CSS and, of course, I had to create a silly cartoon/comic/project about it. So I introduce Simon.CSS, a cursed CSS framework that will undeservingly be forgotten or not created at all.

The idea is to create a CSS library/framework/snippet that disables all animations unless they are requested using "Simon says" like in the children's game. We would require only two simple rules for that:

• One that disables all animations using `animation: none !important;`

• And a mixin that receives an animation as parameter and applies it to the element using `!important` (thus overriding the rule above)

Not giving it too much thought, a simple version could be something like this:

This 90-Byte (minified) framework beauty will cancel all animations unless they are defined using --SimonSays in the native mixin notation –which is barely in specs and not supported by any browser... so the framework doesn't actually work at the moment, but it should work fine in the future.

Obviously, some restrictions apply. For example, if the animation is defined with !important, then it will override the cancellation, even if --SimonSays is not used. But let's ignore those facts for the purpose of making an educational joke.

So, considering the Simon.CSS code above, we could do something like this:

The elements with class "john" will not spin because they are using animation directly, and that is overrun by the !important in Simon.CSS. Meanwhile the elements with class "simon" will spin because they apply the animation with --SimonSays, that applies the !important and overrides the universal selector.

Just a silly cartoon to showcase the @mixin feature that will sooner or later arrive to CSS. I hope you enjoyed it 😊