http://alloyteam.github.io/CodeGuide/?utm_source=wechat_session&utm_medium=social&utm_oi=559748947393064960

    1. // 下面是推荐的属性的顺序
    2. [
    3. /**
    4. * 布局
    5. **/
    6. [
    7. "display",
    8. "visibility",
    9. "float",
    10. "clear",
    11. "overflow",
    12. "overflow-x",
    13. "overflow-y",
    14. "clip",
    15. "zoom"
    16. ],
    17. /**
    18. * 表格与列表样式
    19. **/
    20. [
    21. "table-layout",
    22. "empty-cells",
    23. "caption-side",
    24. "border-spacing",
    25. "border-collapse",
    26. "list-style",
    27. "list-style-position",
    28. "list-style-type",
    29. "list-style-image"
    30. ],
    31. /**
    32. * 实验性属性
    33. **/
    34. [
    35. "-webkit-box-orient",
    36. "-webkit-box-direction",
    37. "-webkit-box-decoration-break",
    38. "-webkit-box-pack",
    39. "-webkit-box-align",
    40. "-webkit-box-flex"
    41. ],
    42. /**
    43. * 定位(xyz)
    44. **/
    45. [
    46. "position",
    47. "top",
    48. "right",
    49. "bottom",
    50. "left",
    51. "z-index"
    52. ],
    53. /**
    54. * 由外向内盒模型
    55. **/
    56. [
    57. "margin",
    58. "margin-top",
    59. "margin-right",
    60. "margin-bottom",
    61. "margin-left",
    62. "-webkit-box-sizing",
    63. "-moz-box-sizing",
    64. "box-sizing",
    65. "border",
    66. "border-width",
    67. "border-style",
    68. "border-color",
    69. "border-top",
    70. "border-top-width",
    71. "border-top-style",
    72. "border-top-color",
    73. "border-right",
    74. "border-right-width",
    75. "border-right-style",
    76. "border-right-color",
    77. "border-bottom",
    78. "border-bottom-width",
    79. "border-bottom-style",
    80. "border-bottom-color",
    81. "border-left",
    82. "border-left-width",
    83. "border-left-style",
    84. "border-left-color",
    85. "-webkit-border-radius",
    86. "-moz-border-radius",
    87. "border-radius",
    88. "-webkit-border-top-left-radius",
    89. "-moz-border-radius-topleft",
    90. "border-top-left-radius",
    91. "-webkit-border-top-right-radius",
    92. "-moz-border-radius-topright",
    93. "border-top-right-radius",
    94. "-webkit-border-bottom-right-radius",
    95. "-moz-border-radius-bottomright",
    96. "border-bottom-right-radius",
    97. "-webkit-border-bottom-left-radius",
    98. "-moz-border-radius-bottomleft",
    99. "border-bottom-left-radius",
    100. "-webkit-border-image",
    101. "-moz-border-image",
    102. "-o-border-image",
    103. "border-image",
    104. "-webkit-border-image-source",
    105. "-moz-border-image-source",
    106. "-o-border-image-source",
    107. "border-image-source",
    108. "-webkit-border-image-slice",
    109. "-moz-border-image-slice",
    110. "-o-border-image-slice",
    111. "border-image-slice",
    112. "-webkit-border-image-width",
    113. "-moz-border-image-width",
    114. "-o-border-image-width",
    115. "border-image-width",
    116. "-webkit-border-image-outset",
    117. "-moz-border-image-outset",
    118. "-o-border-image-outset",
    119. "border-image-outset",
    120. "-webkit-border-image-repeat",
    121. "-moz-border-image-repeat",
    122. "-o-border-image-repeat",
    123. "border-image-repeat",
    124. "padding",
    125. "padding-top",
    126. "padding-right",
    127. "padding-bottom",
    128. "padding-left",
    129. "width",
    130. "min-width",
    131. "max-width",
    132. "height",
    133. "min-height",
    134. "max-height"
    135. ],
    136. /**
    137. * 字体与文字排版
    138. **/
    139. [
    140. "font",
    141. "font-family",
    142. "font-size",
    143. "font-weight",
    144. "font-style",
    145. "font-variant",
    146. "font-size-adjust",
    147. "font-stretch",
    148. "font-effect",
    149. "font-emphasize",
    150. "font-emphasize-position",
    151. "font-emphasize-style",
    152. "font-smooth",
    153. "line-height",
    154. "text-align",
    155. "-webkit-text-align-last",
    156. "-moz-text-align-last",
    157. "-ms-text-align-last",
    158. "text-align-last",
    159. "vertical-align",
    160. "white-space",
    161. "text-decoration",
    162. "text-emphasis",
    163. "text-emphasis-color",
    164. "text-emphasis-style",
    165. "text-emphasis-position",
    166. "text-indent",
    167. "-ms-text-justify",
    168. "text-justify",
    169. "letter-spacing",
    170. "word-spacing",
    171. "-ms-writing-mode",
    172. "text-outline",
    173. "text-transform",
    174. "text-wrap",
    175. "-ms-text-overflow",
    176. "text-overflow",
    177. "text-overflow-ellipsis",
    178. "text-overflow-mode",
    179. "-ms-word-wrap",
    180. "word-wrap",
    181. "-ms-word-break",
    182. "word-break"
    183. ],
    184. /**
    185. * 字体颜色与背景
    186. **/
    187. [
    188. "color",
    189. "background",
    190. "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
    191. "background-color",
    192. "background-image",
    193. "background-repeat",
    194. "background-attachment",
    195. "background-position",
    196. "-ms-background-position-x",
    197. "background-position-x",
    198. "-ms-background-position-y",
    199. "background-position-y",
    200. "-webkit-background-clip",
    201. "-moz-background-clip",
    202. "background-clip",
    203. "background-origin",
    204. "-webkit-background-size",
    205. "-moz-background-size",
    206. "-o-background-size",
    207. "background-size"
    208. ],
    209. /**
    210. * 外边框与阴影
    211. **/
    212. [
    213. "outline",
    214. "outline-width",
    215. "outline-style",
    216. "outline-color",
    217. "outline-offset",
    218. "opacity",
    219. "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
    220. "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
    221. "-ms-interpolation-mode",
    222. "-webkit-box-shadow",
    223. "-moz-box-shadow",
    224. "box-shadow",
    225. "filter:progid:DXImageTransform.Microsoft.gradient",
    226. "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
    227. "text-shadow"
    228. ],
    229. /**
    230. * 动画
    231. **/
    232. [
    233. "-webkit-transition",
    234. "-moz-transition",
    235. "-ms-transition",
    236. "-o-transition",
    237. "transition",
    238. "-webkit-transition-delay",
    239. "-moz-transition-delay",
    240. "-ms-transition-delay",
    241. "-o-transition-delay",
    242. "transition-delay",
    243. "-webkit-transition-timing-function",
    244. "-moz-transition-timing-function",
    245. "-ms-transition-timing-function",
    246. "-o-transition-timing-function",
    247. "transition-timing-function",
    248. "-webkit-transition-duration",
    249. "-moz-transition-duration",
    250. "-ms-transition-duration",
    251. "-o-transition-duration",
    252. "transition-duration",
    253. "-webkit-transition-property",
    254. "-moz-transition-property",
    255. "-ms-transition-property",
    256. "-o-transition-property",
    257. "transition-property",
    258. "-webkit-transform",
    259. "-moz-transform",
    260. "-ms-transform",
    261. "-o-transform",
    262. "transform",
    263. "-webkit-transform-origin",
    264. "-moz-transform-origin",
    265. "-ms-transform-origin",
    266. "-o-transform-origin",
    267. "transform-origin",
    268. "-webkit-animation",
    269. "-moz-animation",
    270. "-ms-animation",
    271. "-o-animation",
    272. "animation",
    273. "-webkit-animation-name",
    274. "-moz-animation-name",
    275. "-ms-animation-name",
    276. "-o-animation-name",
    277. "animation-name",
    278. "-webkit-animation-duration",
    279. "-moz-animation-duration",
    280. "-ms-animation-duration",
    281. "-o-animation-duration",
    282. "animation-duration",
    283. "-webkit-animation-play-state",
    284. "-moz-animation-play-state",
    285. "-ms-animation-play-state",
    286. "-o-animation-play-state",
    287. "animation-play-state",
    288. "-webkit-animation-timing-function",
    289. "-moz-animation-timing-function",
    290. "-ms-animation-timing-function",
    291. "-o-animation-timing-function",
    292. "animation-timing-function",
    293. "-webkit-animation-delay",
    294. "-moz-animation-delay",
    295. "-ms-animation-delay",
    296. "-o-animation-delay",
    297. "animation-delay",
    298. "-webkit-animation-iteration-count",
    299. "-moz-animation-iteration-count",
    300. "-ms-animation-iteration-count",
    301. "-o-animation-iteration-count",
    302. "animation-iteration-count",
    303. "-webkit-animation-direction",
    304. "-moz-animation-direction",
    305. "-ms-animation-direction",
    306. "-o-animation-direction",
    307. "animation-direction"
    308. ],
    309. /**
    310. * 杂项
    311. **/
    312. [
    313. "content",
    314. "quotes",
    315. "counter-reset",
    316. "counter-increment",
    317. "resize",
    318. "cursor",
    319. "-webkit-user-select",
    320. "-moz-user-select",
    321. "-ms-user-select",
    322. "user-select",
    323. "nav-index",
    324. "nav-up",
    325. "nav-right",
    326. "nav-down",
    327. "nav-left",
    328. "-moz-tab-size",
    329. "-o-tab-size",
    330. "tab-size",
    331. "-webkit-hyphens",
    332. "-moz-hyphens",
    333. "hyphens",
    334. "pointer-events"
    335. ]
    336. ]