- From: Philip Walton <philip@philipwalton.com>
- Date: Mon, 28 Apr 2014 12:00:57 -0700
- To: www-style list <www-style@w3.org>
- Message-ID: <CAGRhNhU=m4OTForA6Dm2w3hRvfMs4C7rTBEGRBzryL1iAjkWPw@mail.gmail.com>
Please let me know if this has been discussed before (I couldn't find anything on it, though it's admittedly a hard thing to search for). Perhaps the most common use case for the `rem` unit is when you need to specify a size on multiple elements whose font-size properties are different. Here's a classic example: ``` h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; } ``` This is nice, but I typically avoid declarations like this because they don't cascade. It's the same problem we currently have with pixels. What would be nice is a unit that would work in the above code example that does cascade. And I think the obvious solution would be something like `pem`, which would stand for "parent em" i.e. the computed font-size of the parent element. This would solve weird calculation issues like the following where you have do padding math because you've adjusted the element's font-size. ``` .module { font-size: 0.9em; padding: 1.111em; /* or perhaps `calc(1em / 0.9)` */ } ``` Rewritten with `pem` it would simply be: ``` .module { font-size: 0.9em; padding: 1pem; } ``` Modular CSS is very common these days, and it's nice to have modules that can easily change size based on their context. With `rem` that's not possible, and with `em` you need to do a lot of calculations. `pem` seems to be the best of both worlds. (note, for the font-size property, I suppose `em` and `pem` would do the same thing) This type of thing is somewhat possible today with custom properties scoped to a module, but I think a native unit would be more user friendly as well as more versatile. Thoughts?
Received on Monday, 28 April 2014 19:01:24 UTC