{
  "$type": "site.standard.document",
  "content": {
    "$type": "site.standard.content.markdown",
    "text": "Warning, you probably don’t want to what this post describes anywhere. It’s for funsies.\n\nIn speaking with a colleague, we were discussing solutions for people who were unable to use a framework’s custom component that still expected to have the styles for that component. Think of how you might have a React `<Button/>` that would need to be visually similar to some static HTML page `<button/>`.\n\nFolks writing CSS normally should quickly identify that placing all of the necessary styles under a single identifiable selector that can be applied to the element is the normal way of getting the job done.\n\n```\n.my-button {\n    /** Reusable styles for the button here */\n}\n```\n\n```\n<button class=\"my-button\">Click me</button>\n```\n\nThis assumes that the styles for `.my-button` are found on the same page as the HTML `<button class=\"my-button\"/>`. This is a reasonable method for having reusable styles.\n\nBut maybe you don’t have the ability to update the HTML, how would you change the CSS such that the buttons would receive the styles? What you should first land on is updating the selector to be more generic:\n\n```\nbutton {\n    /** Reusable styles for the button here */\n}\n```\n\nHowever, it’s possible that we don’t want to affect *all* buttons this way. Specifically, we want to have some reusable styles that are written for the common `<Button/>` component, but we also want to take those same styles and create a new stylesheet specific for when we can’t access the HTML. In other words, we don’t want to write the same styles twice, but we do want to change what those styles target. How could we do this?\n\nIf you’re familiar with the CSS tooling ecosystem, you might suggest using a [`@mixin` syntax made popular by Sass](https://sass-lang.com/guide/#mixins). That will allow the styles to be written once, and be reused underneath different selectors.\n\n```\n@mixin my-button {\n    /** Reusable styles for the button here */\n}\n\n/** In the <Button/> component styles */\n.my-button {\n    @include my-button;\n}\n\n/** In the restricted HTML styles */\nbutton {\n    @include my-button;\n}\n```\n\nUnfortunately, this is not native CSS syntax [yet](https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591). So, this assumes that you are using a preprocessor to transform the `@mixin` syntax into native CSS that the browser can parse. Though, I was curious; is there a way we can get mixin behavior in CSS today? And I think there is…\n\n## Keyframes\n\nThe `@keyframes` syntax is a method to add a collection of styles to an element. Typically, we’d define blocks of declarations for each point in the keyframe timeline. We could define all of these styles as the `from` and `to` points, causing these styles to be applied for the entire duration of the animation.\n\n```\n@keyframes mixin-button {\n    from, to { /** Reusable styles */ }\n}\n```\n\nNext, we can write the animation value as the following:\n\n```\n.my-button {\n    animation: mixin-button 0.001ms forwards;\n}\n```\n\nThe `animation` shorthand has three values. The first is the `animation-name` value which refers to the `@keyframes` name set earlier. The next is the `animation-duration` which cannot be `0`, the default. Setting to a very small value causes the animation to be nearly immediate. The `animation-fill-mode` is set to forwards to ensure that the styles provided by the animation continue past the end of the animation so they persist after the very short duration.\n\nNow remembering to write those three values in the shorthand can be a bit cumbersome, so instead we can hide all of this in a CSS custom property.\n\n```\n@property --mixin-button {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: mixin-button 0.001ms forwards;\n}\n```\n\nThis allows us to use the following syntax to apply all of the styles using a single property-value pair under a selector.\n\n```\n/** In the <Button/> component styles */\n.my-button {\n    animation: var(--mixin-button);\n}\n\n/** In the restricted HTML styles */\nbutton {\n    animation: var(--mixin-button);\n}\n```\n\nHere’s the whole implementation working in Codepen:\n\n<p>See the Pen <a href=\"https://codepen.io/fauxserious/pen/YPKgwJj/ab3653ad281c25f70299076c52a2c7f5\"> Mixinimation</a> by Donnie D’Amato (<a href=\"https://codepen.io/fauxserious\">@fauxserious</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\n*<Laughs maniacally into his computer>*\n\n## Drawbacks\n\nIgnoring the hacky nature of applying all the styles by hiding them underneath the `animation` property, one drawback to this will also be where actual animations would be expected for these elements. While there is a syntax to apply multiple animations to a single element, I’m not sure how these might conflict. Additionally, if you are using a [node detection script](https://davidwalsh.name/detect-node-insertion), the animation would fire for all of these elements if listening for animations.\n\nMy recommendation: try it out, put it in the dark corner of your toolbox but, avoid reaching for this unless you really have challenging constraints. We’re all waiting patiently for more native solutions and with CSS moving fast, it’ll be here sooner than we realize.",
    "version": "1.0"
  },
  "description": "An absolute mad-scientist method for reusing a collection of styles.",
  "path": "/posts/mixinimation",
  "publishedAt": "2025-01-30T00:00:00.000Z",
  "site": "https://blog.damato.design",
  "tags": [
    "css"
  ],
  "textContent": "Warning, you probably don’t want to what this post describes anywhere. It’s for funsies.\n\nIn speaking with a colleague, we were discussing solutions for people who were unable to use a framework’s custom component that still expected to have the styles for that component. Think of how you might have a React  that would need to be visually similar to some static HTML page .\n\nFolks writing CSS normally should quickly identify that placing all of the necessary styles under a single identifiable selector that can be applied to the element is the normal way of getting the job done.\n\nThis assumes that the styles for  are found on the same page as the HTML . This is a reasonable method for having reusable styles.\n\nBut maybe you don’t have the ability to update the HTML, how would you change the CSS such that the buttons would receive the styles? What you should first land on is updating the selector to be more generic:\n\nHowever, it’s possible that we don’t want to affect all buttons this way. Specifically, we want to have some reusable styles that are written for the common  component, but we also want to take those same styles and create a new stylesheet specific for when we can’t access the HTML. In other words, we don’t want to write the same styles twice, but we do want to change what those styles target. How could we do this?\n\nIf you’re familiar with the CSS tooling ecosystem, you might suggest using a  syntax made popular by Sass. That will allow the styles to be written once, and be reused underneath different selectors.\n\nUnfortunately, this is not native CSS syntax yet. So, this assumes that you are using a preprocessor to transform the  syntax into native CSS that the browser can parse. Though, I was curious; is there a way we can get mixin behavior in CSS today? And I think there is…\n\nKeyframes\n\nThe  syntax is a method to add a collection of styles to an element. Typically, we’d define blocks of declarations for each point in the keyframe timeline. We could define all of these styles as the  and  points, causing these styles to be applied for the entire duration of the animation.\n\nNext, we can write the animation value as the following:\n\nThe  shorthand has three values. The first is the  value which refers to the  name set earlier. The next is the  which cannot be , the default. Setting to a very small value causes the animation to be nearly immediate. The  is set to forwards to ensure that the styles provided by the animation continue past the end of the animation so they persist after the very short duration.\n\nNow remembering to write those three values in the shorthand can be a bit cumbersome, so instead we can hide all of this in a CSS custom property.\n\nThis allows us to use the following syntax to apply all of the styles using a single property-value pair under a selector.\n\nHere’s the whole implementation working in Codepen:\n\nSee the Pen  Mixinimation by Donnie D’Amato (@fauxserious) on CodePen.\n\n**\n\nDrawbacks\n\nIgnoring the hacky nature of applying all the styles by hiding them underneath the  property, one drawback to this will also be where actual animations would be expected for these elements. While there is a syntax to apply multiple animations to a single element, I’m not sure how these might conflict. Additionally, if you are using a node detection script, the animation would fire for all of these elements if listening for animations.\n\nMy recommendation: try it out, put it in the dark corner of your toolbox but, avoid reaching for this unless you really have challenging constraints. We’re all waiting patiently for more native solutions and with CSS moving fast, it’ll be here sooner than we realize.",
  "title": "Mixinimation",
  "updatedAt": "2026-06-10T01:51:47.457Z"
}