Composing margin and padding rules

[ryanve]

The ordering of the class rules for margin and padding causes what to me seem unintuitive composing precedence issues. Is this by design? Examples: https://codepen.io/ryanve/pen/JJKQzx

Current (v8)

• higher numbers override lower numbers regardless of which side
• x and y classes override shorthand and individual sides

<p class="p3 pr1">p3 wins</p>
<p class="p1 pr3">pr3 wins</p>
<p class="p4 pr2">p4 wins</p>
<p class="px4 pr1">px4 wins (but pr1 winning seems more intuitive)</p>
<p class="mx-auto ml2">mx wins (but ml2 winning seems more intuitive)</p>

Expected

• individual sides override shorthand sides
  • then after that higher numbers win
• x and y classes overrides the main shorthand but not individual sides

[juytter]

Can be fix by writing padding-all (.p0, .p1 ... ) first in css.