conditional-classes

We’re setting classes on things – conditionally!

So, you can query a container, and set different styles on descendants, depending on the container’s state:

.container {
	--if: ( 500px <= inline < 800px ) .medium,
	      ( inline >= 800px ) .large;
}
	
.container.medium .element {
	color: var(--purple);
}

.container.large .element {
	color: var(--orange);
}

…or you can query and style those descendant elements directly:

.element {
	--if: ( 2em <= inline < 4em ) .medium,
	      ( inline >= 4em ) .large;
}

.element.medium {
	color: var(--purple);
}

.element.large {
	color: var(--orange);
}

Watch out for loops!

.element.medium {
	border: 1em solid var(--darkpurple);
}

Which is to say: make sure that the things that you’re styling never affect the thing that you’re querying. As of this writing (May 2019), there are a few ideas, but little agreement, about how to best bake this separation into a platform-native feature for this sort of thing, so that web developers never have to worry about it.