add css if guidance

[patrickkettner]

fixes #689

[rviscomi]

This feature isn't a blocker for I/O, so I'm going to set this PR to draft. After I/O, but before marking it ready for review, could you add any other relevant use cases for the feature? Most features have between 2–5 use cases, but it's ok if there's truly just one.

[patrickkettner]

@rviscomi did we want to do anything with this one?

[patrickkettner]

@rviscomi Was thinking about use cases, and after looking through the existing guides it seems like the style query ones (child-state-based-styling, design-token-reactivity, and usage-aware-component-variations) cover reacting to state
on an ancestor or child. I don't think if is necessarily better than any of those (at least as they are written), so could the gap a if() guide fills be an element branching on a custom property set on itself? A unique use case that I coudl think of is styling component variants from a single flag without a class per variant, as css/variant-driven-styling. Like a badge that sets --severity: error and uses that to determine its background, border, and icon color (instead of needing a .badge-error class or a wrapper container). Alternatively I can mess with the other guides I mentioned before to fold in if()?

[LeaVerou]

Responsive inline styling is a good one, and if() does make things a lot more compact. However, the current Chrome implementation makes it hard to store conditions in variables, which limits utility as you have to repeat the MQ all over the place or pre-bake the values, which is easy to do with a regular MQ too.
See https://codepen.io/leaverou/pen/Kwaxegy?editors=1100 and https://codepen.io/leaverou/pen/XJpPYMy?editors=1100 specifically for MQs.

I'd remove the --theme one as it actively conflicts with the component-specific-light-dark-theme guide. That said, branching based on resolved, local color-scheme is a great use case that combines both if() and the recently launched color-scheme() feature. Basically @bramus' https://www.bram.us/2025/09/30/css-custom-light-dark/ without the @function.

But the guide name is css-if, which sounds like a discipline guide about doing conditionals in CSS. Which is also another use case!

In terms of other use cases, if() shines for cases where:

• You can branch on the element itself (style queries only let you branch on descendants)
• The condition is global, so an inline expression simplifies things (at least in theory, see caveat above)