css - What is the proper way to order vendor prefixes?

Question

The rub

• CSS Tricks says that the order of the display vendor prefixes for flexbox is important and shows one ordering (-webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex)
• MDN shows a different order than CSS Tricks and swaps -moz-box out for -moz-flex (-webkit-box, -webkit-flex, -moz-flex, -ms-flexbox, flex)
• Bourbon shows yet a different order and brings in box, which the other two pages don't even mention (-webkit-box, -moz-box, box, -webkit-flex, -moz-flex, -ms-flexbox, flex)

The questions

• Is order really important?
• What is the correct way to do this?

Answer 1

As long as the W3C version (the official property) comes last, there is no difference.

The CSS rendering engine will always pick the last property that applies. Hence, you don't want Chrome, for example, to skip over flex and pick -webkit-flex, if flex is actually supported.

You're seeing variations in the ordering of vendor prefixes in CSS-Tricks, MDN and Bourbon because the order doesn't matter. Just note what they all have in common: flex is last.

Here are some more details:

• Ordering CSS3 Properties
• Ordering of vendor-specific CSS declarations