CSScomb.js --- 自定义 CSS 编写风格配置文件

一、排序分类

1、 content overflow position z-index display float  ...
表示定位/布局的属性（content比较特殊，作为伪元素不可少的，经常放置于第一位）

2、 width height margin padding border ...
表示盒子模型的属性

3、 background ...
表示背景的属性

4、 color font line-height text-* vertical-align ...
字体相关的属性

5、 list-style ...
除 CSS3 外的其他属性

6、 border-radius transform ...
CSS3 属性

二、排序代码

module.exports = {
    exclude: [
        // 排除的生效目录
        '.git/**',
        'node_modules/**',
        'bower_components/**'
    ],
    'always-semicolon': true, // 最后一个属性是否添加分号
    'block-indent': '    ', // 设置代码块内部,包括媒体查询和嵌套规则的缩进
    'color-case': 'lower', // 设置颜色的大小写  lower、upper
    'color-shorthand': true, // 设置颜色是否采用缩写 #ffffff --- #fff
    'element-case': 'lower', // 指定标签元素大小写 LI --- li
    'eof-newline': false, //  true a { color: red } → a { color: red }\n |||| false a { color: red }\n → a { color: red }
    'leading-zero': false, // 是否去掉前置 0    width: 0.5rem --- width: .5rem
    quotes: 'single', //   single、double  使用单引号或者双引号
    'remove-empty-rulesets': false, // 是否移除包含空规则的选择器
    'space-after-colon': ' ', // 设置：后的空间
    'space-between-declarations': '\n', // 设置css属性之后的空间
    'space-after-combinator': ' ', // 设置连接符后面的空间   如果值为1或者空格：li >a --- li > a
    'space-after-opening-brace': '\n', // 设置左大扩号（{）后的空间
    'space-after-selector-delimiter': '\n', // 设置选择器分隔符之后的空间  .xx, .yy
    'space-before-closing-brace': '\n', // 设置右大扩号（}）后的空间
    'space-before-colon': '', // 设置：前的空间
    'space-before-combinator': ' ', // 设置连接符前面的空间   如果值为1或者空格：li> a --- li > a
    'space-before-opening-brace': ' ', // 设置左大扩号（{）前的空间
    'space-before-selector-delimiter': '', // 设置选择器分隔符之前的空间  .xx, .yy
    'strip-spaces': true, // 是否去掉尾部空格
    'unitless-zero': true, // 当值为0时，是否删除单位
    'vendor-prefix-align': true, // 有浏览器兼容前缀属性时，是否对齐
    'sort-order': [
        [
            // less、scss变量
            '$variable',
            'content',

            // 1、表示定位/布局的属性
            'overflow',
            'overflow-x',
            'overflow-y',
            '-ms-overflow-x',
            '-ms-overflow-y',
            'display',
            'visibility',
            'float',
            'clear',
            'clip',
            'zoom',
            '-webkit-align-content',
            '-ms-flex-line-pack',
            'align-content',
            '-webkit-box-align',
            '-moz-box-align',
            '-webkit-align-items',
            'align-items',
            '-ms-flex-align',
            '-webkit-align-self',
            '-ms-flex-item-align',
            '-ms-grid-row-align',
            'align-self',
            '-webkit-box-flex',
            '-webkit-flex',
            '-moz-box-flex',
            '-ms-flex',
            'flex',
            '-webkit-flex-flow',
            '-ms-flex-flow',
            'flex-flow',
            '-webkit-flex-basis',
            '-ms-flex-preferred-size',
            'flex-basis',
            '-webkit-box-orient',
            '-webkit-box-direction',
            '-webkit-flex-direction',
            '-moz-box-orient',
            '-moz-box-direction',
            '-ms-flex-direction',
            'flex-direction',
            '-webkit-flex-grow',
            '-ms-flex-positive',
            'flex-grow',
            '-webkit-flex-shrink',
            '-ms-flex-negative',
            'flex-shrink',
            '-webkit-flex-wrap',
            '-ms-flex-wrap',
            'flex-wrap',
            '-webkit-box-pack',
            '-moz-box-pack',
            '-ms-flex-pack',
            '-webkit-justify-content',
            'justify-content',
            '-webkit-box-ordinal-group',
            '-webkit-order',
            '-moz-box-ordinal-group',
            '-ms-flex-order',
            'order',

            'position',
            'z-index',
            'top',
            'right',
            'bottom',
            'left',

            // 2、表示盒子模型的属性
            'width',
            'min-width',
            'max-width',
            'height',
            'min-height',
            'max-height',
            'margin',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'padding',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left',
            'border',
            'border-width',
            'border-style',
            'border-color',
            'border-top',
            'border-top-width',
            'border-top-style',
            'border-top-color',
            'border-right',
            'border-right-width',
            'border-right-style',
            'border-right-color',
            'border-bottom',
            'border-bottom-width',
            'border-bottom-style',
            'border-bottom-color',
            'border-left',
            'border-left-width',
            'border-left-style',
            'border-left-color',

            // 3、表示背景的属性
            'background',
            'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader',
            'background-color',
            'background-image',
            'background-repeat',
            'background-attachment',
            'background-position',
            'background-position-x',
            '-ms-background-position-x',
            'background-position-y',
            '-ms-background-position-y',
            '-webkit-background-clip',
            '-moz-background-clip',
            'background-clip',
            'background-origin',
            '-webkit-background-size',
            '-moz-background-size',
            '-o-background-size',
            'background-size',
            'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity',
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
            '-ms-interpolation-mode',
            'color',

            // 4、字体相关的属性
            'font',
            'font-family',
            'font-size',
            'font-weight',
            'font-style',
            'font-variant',
            'font-size-adjust',
            'font-stretch',
            'font-effect',
            'font-emphasize',
            'font-emphasize-position',
            'font-emphasize-style',
            'font-smooth',
            'line-height',
            'vertical-align',
            'text-align',
            '-webkit-text-align-last',
            '-moz-text-align-last',
            '-ms-text-align-last',
            'text-align-last',
            'white-space',
            'text-decoration',
            'text-emphasis',
            'text-emphasis-color',
            'text-emphasis-style',
            'text-emphasis-position',
            'text-indent',
            '-ms-text-justify',
            'text-justify',
            'letter-spacing',
            'word-spacing',
            '-ms-writing-mode',
            'text-outline',
            'text-transform',
            'text-wrap',
            'text-overflow',
            '-ms-text-overflow',
            'text-overflow-ellipsis',
            'text-overflow-mode',
            '-ms-word-wrap',
            'word-wrap',
            'word-break',
            '-ms-word-break',
            '-moz-tab-size',
            '-o-tab-size',
            'tab-size',
            '-webkit-hyphens',
            '-moz-hyphens',
            'hyphens',
            'pointer-events',

            // 5、除 CSS3 外的其他属性
            'outline',
            'outline-width',
            'outline-style',
            'outline-color',
            'outline-offset',
            'list-style',
            'list-style-position',
            'list-style-type',
            'list-style-image',
            'caption-side',
            'border-collapse',
            'border-spacing',
            'table-layout',
            'empty-cells',
            'opacity',
            'cursor',
            'quotes',
            'counter-reset',
            'counter-increment',
            'resize',
            '-webkit-user-select',
            '-moz-user-select',
            '-ms-user-select',
            'user-select',
            'nav-index',
            'nav-up',
            'nav-right',
            'nav-down',
            'nav-left',

            // 6、css3
            '-webkit-transition',
            '-moz-transition',
            '-ms-transition',
            '-o-transition',
            'transition',
            '-webkit-transition-delay',
            '-moz-transition-delay',
            '-ms-transition-delay',
            '-o-transition-delay',
            'transition-delay',
            '-webkit-transition-timing-function',
            '-moz-transition-timing-function',
            '-ms-transition-timing-function',
            '-o-transition-timing-function',
            'transition-timing-function',
            '-webkit-transition-duration',
            '-moz-transition-duration',
            '-ms-transition-duration',
            '-o-transition-duration',
            'transition-duration',
            '-webkit-transition-property',
            '-moz-transition-property',
            '-ms-transition-property',
            '-o-transition-property',
            'transition-property',
            '-webkit-transform',
            '-moz-transform',
            '-ms-transform',
            '-o-transform',
            'transform',
            '-webkit-transform-origin',
            '-moz-transform-origin',
            '-ms-transform-origin',
            '-o-transform-origin',
            'transform-origin',
            '-webkit-animation',
            '-moz-animation',
            '-ms-animation',
            '-o-animation',
            'animation',
            '-webkit-animation-name',
            '-moz-animation-name',
            '-ms-animation-name',
            '-o-animation-name',
            'animation-name',
            '-webkit-animation-duration',
            '-moz-animation-duration',
            '-ms-animation-duration',
            '-o-animation-duration',
            'animation-duration',
            '-webkit-animation-play-state',
            '-moz-animation-play-state',
            '-ms-animation-play-state',
            '-o-animation-play-state',
            'animation-play-state',
            '-webkit-animation-timing-function',
            '-moz-animation-timing-function',
            '-ms-animation-timing-function',
            '-o-animation-timing-function',
            'animation-timing-function',
            '-webkit-animation-delay',
            '-moz-animation-delay',
            '-ms-animation-delay',
            '-o-animation-delay',
            'animation-delay',
            '-webkit-animation-iteration-count',
            '-moz-animation-iteration-count',
            '-ms-animation-iteration-count',
            '-o-animation-iteration-count',
            'animation-iteration-count',
            '-webkit-animation-direction',
            '-moz-animation-direction',
            '-ms-animation-direction',
            '-o-animation-direction',
            'animation-direction',

            '-webkit-border-radius',
            '-moz-border-radius',
            'border-radius',
            '-webkit-border-top-left-radius',
            '-moz-border-radius-topleft',
            'border-top-left-radius',
            '-webkit-border-top-right-radius',
            '-moz-border-radius-topright',
            'border-top-right-radius',
            '-webkit-border-bottom-right-radius',
            '-moz-border-radius-bottomright',
            'border-bottom-right-radius',
            '-webkit-border-bottom-left-radius',
            '-moz-border-radius-bottomleft',
            'border-bottom-left-radius',
            '-webkit-border-image',
            '-moz-border-image',
            '-o-border-image',
            'border-image',
            '-webkit-border-image-source',
            '-moz-border-image-source',
            '-o-border-image-source',
            'border-image-source',
            '-webkit-border-image-slice',
            '-moz-border-image-slice',
            '-o-border-image-slice',
            'border-image-slice',
            '-webkit-border-image-width',
            '-moz-border-image-width',
            '-o-border-image-width',
            'border-image-width',
            '-webkit-border-image-outset',
            '-moz-border-image-outset',
            '-o-border-image-outset',
            'border-image-outset',
            '-webkit-border-image-repeat',
            '-moz-border-image-repeat',
            '-o-border-image-repeat',
            'border-image-repeat',

            'box-decoration-break',
            '-webkit-box-shadow',
            '-moz-box-shadow',
            'box-shadow',
            'filter:progid:DXImageTransform.Microsoft.gradient',
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
            'text-shadow',

            '-webkit-box-sizing',
            '-moz-box-sizing',
            'box-sizing'
        ]
    ]
}