Faulty logic – CSS-Tricks

Ain’t this the truth:

It’s like when you’re learning a new language. At some point your brain goes from translating from your mother tongue into the other language, and instead starts thinking in that other language.

I don’t speak any other language besides English, but I’ve heard that’s true. With perhaps a last step being when you start dreaming in the new language.

But here Jeremy is using it as a metaphor for learning new CSS syntax. First you hear about it, then you try it, then you grok it, then a flip switches in your brain and you start reaching for it intuitively. Indeed thinking in that new syntax.

I deeply love that moment. It feels like you’ve gone up a level.

The sad part of Jeremy’s article is that there is a disconnect happening. Like logical properties have arrived, we can use them, many of our brains are starting to make the switch. But… they aren’t used consistently.

For example, if you’re thinking in logical properties and setting margin and padding, you might do:

.button {
  padding-inline: 1rem;
  margin-inline: 1rem;
}

In fact, you can even set what would have been width in a top-to-bottom language as inline-size. But, once @container queries drop, which is happening, you can’t express that width breakpoint as inline-size, it’s back to traditional min-width and max-width stuff.

That would be a bummer as it muddies the water of how clearly we are able to think. This stuff is moving very fast though, as I just took a peek at the Draft Spec (soon to be Working Draft?) and Example 2 is:

main, aside {
  container: inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

So, it looks like this inconsistency has been mopped up. Example 3 has @container (width > 40em) in it, so maybe it’ll ship being able to use them either way. I’d probably vote they roll with only logical properties, but I imagine that ship is close to sailing.

Jeremy also points out that overflow-* properties aren’t converted to logical yet, as something like overflow-x should be overflow-inline. Only Firefox has support for that so far.

I hope that’ll get cleaned up soon. But all in all, there is a ton of logical properties that are ready to think in: size, position, margin, padding, border, alignment, and more. Heck, even something like border-top-left-radius can now be thought of and used as border-start-start-radius, and you can float: inline-end instead of float: right.