Limiting Allowed Units

[mdgriffith]

style-elements usually accepts only one unit value per property. This is to reduce the surface area of the API and push the user to more concrete solutions. Generally I'm not sure if having many different units is actually beneficial. In fact it might needlessly complicate things.

For example, if percents are available to you, you might try to do layout using a percentage position instead of using a flexbox layout, which is a more complete and robust solution.

Units in style-elements:

• left, top, right, bottom, spacing, padding: px
• width, height: px, auto, percent
• line-height: unitless (in terms of ratio compared to font its applied to)
• font-size: px
• any other length: px
• any angle: radians

Note: rem units can be implemented using the above supported units.

That being said, I'm interested in seeing use-cases for other units if people have them.

[Dremora]

Good on eliminating em/rem! I still see plenty of developers who are somehow convinced that using those units makes their code better, while in fact it only introduces an extra level of abstraction (you still need to convert between em/rem and px in your head).

[mdgriffith]

For width and height, I've added the concept of fill int, which works like flex-grow.

I think some thought needs to go into evaluating the fractional unit (fr) too, which is relatively new.