`pem` (parent em) unit proposal

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