The What If Machine: Bringing the 'Iffy' Future of CSS into the Present

The CSS working group decided to develop inline conditional statements, which sparked heated discussions in the comments section. Some developers are excited about this, while others are concerned that this will make the future of CSS uncertain. Will this slide into a hellish situation filled with developers who abuse CSS, who implement too much logic where it should be a style language? Won't. Even if some people do that, no mainstream blog posts the nonsense of the hypothetical madman who adds crazy logic to CSS for their own purposes. Therefore, we know that the future of CSS is safe.

The end of the world? It's over long ago

The arguments in this article further confirm that inline conditional statements may not be a harbinger of the end of civilization: I think we can now use style queries to achieve the same functionality, which are getting quite good browser support.

Lea's proposal is more like syntactic sugar, sometimes convenient and allows for a cleaner markup. Any panic remarks about inline conditional statements that ruin CSS are equivalent to exaggerating the addition of ternary operators to languages ​​that already support if statements.

In fact, Lea said of the syntax she proposed: "Just like the ternary operator in JS, it may also be more ergonomic for situations where only a small part of the value changes." She also mentioned that CSS has always been conditional. It is not that the conditional statements in CSS are forbidden, but that CSS is not always good at handling it.

I want a conditional Oompa Loompa!

So too. There are many others, as evidenced by Lea's carefully organized list of amazing complex tricks, people have discovered ways to simulate inline conditional statements using current CSS. Some of these tips are so complicated that I'm still not sure if I understand them, but their names are really cool. Lea concluded: "If you know any other techniques, please let me know so I can add them."

Hmm...I definitely missed some questions about these tips to solve. I noticed that Lea had a PhD and I was an idiot. So I scroll up and reread, but I can't stop thinking: Are these people trying to avoid adding extra divs around their parts and using style queries?

It's fair if people want to avoid unnecessary elements in the DOM, but Lea's list of tips shows that the alternatives are very complex, so it's worth trying how far apart a style query with wrapping divs can take us.

Convincing Examples

Lea's example revolves around setting a "variant" property on the prompt box and points out that we can almost implement what she wants with style query, but the syntax of this assumption is unfortunately invalid :

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

She wants to style the container itself and its child elements according to --variant. Now, in this concrete example, I can use z-index to modify the ::after pseudo-element to create the illusion that it is a container. Then I can set its borders and background. Unfortunately, this solution is as fragile as I do, in this other example, Lea wants to set the flex-flow of the container based on the variant. My pseudo-element solution is not good enough in this case.

Remember, Lea's proposal was incorporated into the CSS norm, just like the birthday gifts the universe gave her, so it would be unfair to try to replace her gifts with those cheap fake containers I bought on Temu. She deserves a real container.

Let's try again.

Using the wrapper

The Lea proposal's comment mentions type grinding, but calls it "a very (I say again, very) complex but effective" way to solve the problem that inline conditional statements are designed to solve. This is not fair. Type grinding took me a little while to understand, but I think it's easier to understand than other tips and has fewer drawbacks. Nevertheless, this kind of code in production can be boring when you look at the examples. So let's grit our teeth and try to build an alternative version of Lea's flexbox variant example. My version does not use type grinding or any tricks, but uses "old-fashioned" (not so old-fashioned) style queries as well as wrapping divs to solve the problem that we can't style the container itself using style queries.

Packaging Comparison Type Grinding

Compare Lea's example with my version of the code to help us understand the differences in complexity.

The following are two versions of CSS:

The following are two versions of the tag:

Therefore, simpler CSS and slightly more markup. Maybe we found the direction.

The reason I like style queries is that Lea's proposal uses the style() function, so if her proposal is adopted by the browser, it seems feasible to migrate the style query to an inline conditional statement and remove the wrapper. If I don't mention that migrating this kind of code might be a viable use case for AI, this post is not the 2025 article. Maybe the AI ​​won't be that bad when we get inline conditional statements.

But we were a little off topic. Have you tried adopting some cool JavaScript frameworks that look elegant in the To-Do example? If anything, you will know that a solution that looks compelling in simple examples may challenge your will to survive in real examples. So let's see how effective it works with style queries in more realistic examples.

Seeking verification

Combine my above example with MDN's example on HTML5 validation and Seth Jeffery's cool demonstration of transforming pure CSS icons, and then type them all into the "What If" machine for the following demonstration.

If you make the form valid, all changes made to the prompt box are based on a custom property. This property is never directly used in the CSS property value of the prompt box, but it controls the style query that sets the border color, icon, background color, and content of the prompt box. We set the --variant property at the .callout-wrapper level. I set it up using CSS as follows:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

However, this variable can be set by inline styles in JavaScript or HTML, just like Lea's example. Form validation is just my way to make the demo more interactive to show the prompt box that can be changed dynamically based on --variant.

Summary

I write an article against the techniques of bending CSS to our will, which doesn't fit my style, and I'm totally in favor of the "deception" language to do what we want to do. However, using wrappers and style queries may be the easiest way to get support for inline conditional statements. If we want to feel more like living in the future, we can use the above approach as the basis for polyfills of inline conditional statements or using preprocessor magic like Parcel plugin or PostCSS plugin – but for this compromise, my trigger finger will always crave the Delete key. Lea admits, “If you can do something with style queries, use style queries as much as you like – they are almost certainly a better solution.”

Through the experiments in this article, I have convinced myself that style query is still a good choice even in Lea's case - but I'm still looking forward to inline conditional statements. Meanwhile, style queries are easier to understand at least compared to other known solutions. Ironically, I agree with the comments that question the requirement of inline conditional statements, not because it will ruin CSS, but because I believe we can now implement Lea with modern CSS, without any tricks. So, we may not need inline conditional statements, but they allow us to write more readable, more concise code. If you can think of some examples of complexity barriers that you can encounter using style queries instead of inline conditional statements, please let me know in the comments section.

The above is the detailed content of The What If Machine: Bringing the 'Iffy' Future of CSS into the Present. For more information, please follow other related articles on the PHP Chinese website!