CSS: When to Use Logical Properties

Published on Nov 22, 2019 (updated May 28, 2021), filed under development, css. (Share this post, e.g., on Mastodon or on Bluesky.)

This is one of 180 articles that you can also read in an ebook: On Web Development II.

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 an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager at various companies, including Google; I’m an open-source developer and a 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 with respect to politics and philosophy. Here on meiert.com I talk about some of my experiences and perspectives. (Please share feedback—interpret charitably, keep it friendly, but do be critical.)