css 命名规范 | 属性编写顺序规范 及 意义

命名规范

参考博客

属性顺序

如果包含 content 属性，应放在最前面

顺序	分类	描述	包含属性
1	Positioning Model	布局方式、位置	position / top / right / bottom / left / z-index / display / float / …
2	Box Model	盒模型	width / height / padding / margin / border / overflow / …
3	Typographic	文本、排版	font / line-height / text-align / word-wrap / …
4	Visual	视觉外观	color / background / list-style / transform / animation / transition / …

意义：

• Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。
• 盒模型紧跟其后，因为他决定了一个组件的大小和位置。
• 其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。