苏溪云
Ordering CSS Properties by Type

There're two popular methods to order css properties:

  • type
  • alphabetic

Alphabetic order, however, is more suitable for searching rather than classifing css properties. In most situations, we prefer a not only consistent but also clear-type way to order css properties.
The following is an ordering example recommended by author:

.element
  /* Position *//* Position *//* Position *//* Position *//* Position *//* Position *//* Position */
  position absolute
  left 0
  top 0

  /* Display & Box model */
  display flex
  box-sizing border-box
  width 500px
  height 500px
  padding 5px
  margin 10px
  border 1px solid grey
  border-radius 5px
  justify-content center
  align-items center

  /* Text */
  font-size 16px
  line-height 20px
  font-weight bold

  /* Other */
  cursor pointer

  /* Color */
  color blue
  background white

Absolutely we can justify appropriate types' orders and subordinary types' orders for own best experience of writing css properties.

感谢你的阅读。欢迎通过微信(扫描下方二维码)或Github订阅我的博客。

微信公众号:苏溪云的博客

发布时间: 6/23/2018
分类: 技术/前端/CSS
作者版权所有,转载请注明出处,禁止商业转载