there’s a reason why <article class="card" data-align="left" data-size="small" /> looks attractive — it’s mirroring the APIs we’re used to seeing in design systems and component libraries, but bringing it to vanilla HTML and CSS. Indeed, it’s a small step from data attribute selectors to custom pseudo selectors or prop-based selectors when using Web Components (think <my-card align="left" size="small" />).

I’m intrigued by this idea and the code samples.

<article
        class="card"
        data-loading="true"
        data-variant="primary"
        data-size="large"
        data-border="top right"
        data-elevation="high"
      />
      
      <style>
        .card[data-loading=true] {}
        .card[data-variant=primary] {}
        .card[data-size=large] {}
        /* etc. */
      </style>