Firefox recommended and personally understood css writing order_CSS/HTML

In my recent work, I have encountered many problems. One of them I think is the most important, and that is the order in which CSS is written. It can reflect the thoughts of a front-end worker. If you see this article, please stop writing whichever attribute comes to mind.

First let’s take a look at the writing order recommended by firefox
* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org /contribute/writing/markup)
*/
/* Suggested order:
//Display attributes
* display
* list-style
* position
* float
* clear
//Self attribute
* width
* height
* margin
* padding
* border
* background
//text attribute
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
As you can see from the recommended order above, it is very organized. The order recommended above does not include more detailed attributes, such as: top, right, bottom, left, etc. Some people may ask, does this have any impact on performance? I am very sorry to tell you, I don’t know either. , but I think doing things in an organized way is the right way (maybe you have a better way).

My understanding:
1. Display attributes: display||visibility||list-style(list-style-type, list-style-image, list-style-position)||overflow
2. Positioning and floating attributes: position||top||right||bottom||left||float||clear
3. Box model: width||height||margin||padding||border
4. Background: background (background-image, background-position, background-repeat, background-attachment)
5. Text attributes: font-style||font-variant||font-weight||font-size ||font-family||color
6. Text attributes: text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-decoration| |text-shadow
7. Others

Quote someone, "Whether you use this order or not, I use it anyway." Any corrections are welcome