Firefox recommendations and personal understanding of the CSS writing order _css/html

Recent work, encountered a lot of problems, one of the problems I think is the most important, that is the order of CSS writing, he can reflect a front-end worker's thinking. If you see this article, do not think about which attribute to write which attribute.

Let's take a look at Firefox's recommended writing sequence.
* mozilla.org Base Styles
* Maintained by Fantasai
* (classes defined in the Markup guide-http://mozilla.org/contribute/writing/markup)
*/
/* Suggested Order:
Display Properties
* Display
* List-style
* Position
* Float
* Clear
Own properties
* Width
* Height
* Margin
* Padding
* Border
* Background
Text properties
* Color
* Font
* Text-decoration
* Text-align
* Vertical-align
* White-space
* Other text
* Content
*
*/
From the order suggested above, you can see that it's very organized. The above recommended order does not write more detailed attributes, such as: Top,right,bottom,left, and so on, perhaps some people will ask, so what impact on performance? I am very sorry to tell you that I do not know, but I think that organized work is the right (perhaps you have a better way).

My understanding:
1. Display Properties: display| | visibility| | List-style (List-style-type, List-style-image, list-style-position) | | Overflow
2. Positioning and Floating properties: 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 Properties: text-indent| | text-align| | vertical-align| | Letter-spacing| | Word-spacing| | text-transform| | text-decoration| | Text-shadow
7. Other

Quote someone, "whether you use it or not, I use it anyway." You are welcome to correct me