CSS: When to Use Logical Properties

Published on Nov 22, 2019 (updated May 28, 2021), filed under development (feed). (Share this on Mastodon or Bluesky?)

Brief thoughts on a more complex matter. Logical properties are great and long overdue. They are great because they solve an ugly problem of international, multi-directional web development in that directionality does not need to affect your writing and managing of CSS anymore.

Example: Write

p {
  margin-inline-start: 1rem;
}

instead of something (intentionally verbose) like

p {
  margin-left: 1rem;
  margin-right: 0;
}

[dir='rtl'] p {
  margin-left: 0;
  margin-right: 1rem;
}

But when should you use logical properties?

First, when support is sufficient for your project’s needs.

Then, when that’s the case, there are really two answers:

The reasonable answer: If you actually work with sites or apps with two directionalities. Logical properties may turn into a best practice, but not using logical properties may actually never turn into a bad practice for projects of only one directionality.

The easy answer: If you want to. It’s completely up to you.

All other answers are nonsense, especially when they contain being judged or guilt-tripped by other developers. Logical properties have their particular use in bidirectional environments.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)