CSS: When to Use Logical Properties

Published on November 22, 2019 (↻ May 28, 2021), filed under (RSS feed).

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.

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!