Future CSS: State Container Queries
Is this really the way forward? I'm pretty sure implementing CSS from scratch (just looking at the specs) would take the average developer at least 10,000 hours. But in any case, why doesn't the container query bind to a class? Having to name your container is so weird (we already <i>have</i> names: they're called classes; and IDs; and DOM elements; and pseudo-classes; and aria labels; we need more!?).<p><pre><code>    .special-wrapper {
      --theme: dark;
      container-name: stats;
    }

    @container stats style(--theme: dark) {
      .stat {
        /* Add the dark styles. */
      }
    }
</code></pre>
Not to mention that half the problems in the blog post are completely manufactured:<p>> That works fine, but if there is a space character within the <figcaption> element, it will fail.<p>Uh, yeah, that's how :empty works (it's not "empty"). If that's such a pain point, I'd propose a :no-children-but-maybe-empty pseudo-class before you add a completely new feature to the language, :but-maybe-that's-just-me.<p><pre><code>    /* Instead of.. */
    html[dir="rtl"] .button-icon {
      transform: scaleX(-1);
    }
    
    /* We do this */
    @container state(dir: rtl) {
      .button-icon {
        transform: scaleX(-1);
      }
    }
</code></pre>
Insert "they're exactly the same" meme. (Except for more curly braces: fun.)