正文
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'
]
]
}
