The wasted potential of CSS attribute selectors

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>