<story><title>Future CSS: State Container Queries</title><url>https://ishadeed.com/article/css-state-queries/</url></story><parent_chain></parent_chain><comment><author>dvt</author><text>Is this really the way forward? I&amp;#x27;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&amp;#x27;t the container query bind to a class? Having to name your container is so weird (we already &lt;i&gt;have&lt;/i&gt; names: they&amp;#x27;re called classes; and IDs; and DOM elements; and pseudo-classes; and aria labels; we need more!?).&lt;p&gt;&lt;pre&gt;&lt;code&gt;    .special-wrapper {
      --theme: dark;
      container-name: stats;
    }

    @container stats style(--theme: dark) {
      .stat {
        &amp;#x2F;* Add the dark styles. *&amp;#x2F;
      }
    }
&lt;/code&gt;&lt;/pre&gt;
Not to mention that half the problems in the blog post are completely manufactured:&lt;p&gt;&amp;gt; That works fine, but if there is a space character within the &amp;lt;figcaption&amp;gt; element, it will fail.&lt;p&gt;Uh, yeah, that&amp;#x27;s how :empty works (it&amp;#x27;s not &amp;quot;empty&amp;quot;). If that&amp;#x27;s such a pain point, I&amp;#x27;d propose a :no-children-but-maybe-empty pseudo-class before you add a completely new feature to the language, :but-maybe-that&amp;#x27;s-just-me.&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;#x2F;* Instead of.. *&amp;#x2F;
    html[dir=&amp;quot;rtl&amp;quot;] .button-icon {
      transform: scaleX(-1);
    }
    
    &amp;#x2F;* We do this *&amp;#x2F;
    @container state(dir: rtl) {
      .button-icon {
        transform: scaleX(-1);
      }
    }
&lt;/code&gt;&lt;/pre&gt;
Insert &amp;quot;they&amp;#x27;re exactly the same&amp;quot; meme. (Except for more curly braces: fun.)</text></comment>
<story><title>Future CSS: State Container Queries</title><url>https://ishadeed.com/article/css-state-queries/</url></story><parent_chain></parent_chain><comment><author>wbobeirne</author><text>Interesting to see this, as I feel like I&amp;#x27;ve seen arguments against this kind of state-based querying come up to avoid cases where you end up with an infinite loop of state query applying -&amp;gt; new styles applying -&amp;gt; new styles undo the state -&amp;gt; state query not applying -&amp;gt; styles removed -&amp;gt; original state query applying, repeat indefinitely. I believe this was the rationale for not having pseudo states for when a container is scrollable, for instance. I wonder what they&amp;#x27;ve done to avoid these cases.&lt;p&gt;For instance, in their `state(wrap: true)` example, now that the wrapping element is hidden, isn&amp;#x27;t it no longer wrapping? Why does the query continue to apply?</text></comment>