Jens Oliver Meiert

Get 15% off on select books on Gumroad—use discount code “testdrive”.

CSS: When to Use Logical Properties

Post from November 22, 2019 (↻ May 28, 2021), filed under .

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

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on 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!

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Learn about new posts by feed or on Twitter.

Found a mistake? Email me,

You are here: HomeArchive2019 → CSS: When to Use Logical Properties

Last update: May 28, 2021

Professional frontend developers produce valid HTML and CSS.