CSS: When to Use Logical Properties
Post from November 22, 2019 (↻ August 15, 2020), filed under Web Development.
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 Oliver Meiert, and I’m a web developer (engineering manager) and author. I love trying things, sometimes including philosophy, art, and adventure. 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.
Read More
Have a look at the most popular posts, possibly including:

Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.