命名规范
属性顺序
如果包含 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 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。
- 盒模型紧跟其后,因为他决定了一个组件的大小和位置。
- 其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。