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'
]
]
}
CSScomb.js --- 自定义 CSS 编写风格配置文件的更多相关文章
- 5+App 基于HTML、JS、CSS编写的运行于手机端的App（DCloud开发）
HTML5 Plus移动App(5+App) 工具: 开发工具HBuilder下载下载地址 开发工具HBuilderX下载下载地址(替代HBuilder) 框架: uni-app :是一个使用 Vue ...
- 怎样使用自定义标签简化 js、css 引入？
国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...
- js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- Yii2的相关学习记录，自定义gii模板和引用vendor中的js、css（四）
上文中后台模板框架已经搭建起来了,但还是有些不协调,像是有两个User标题,或者我们想自己在gii生成时添加或删除些公用的东西.这就需要我们定义自己的gii模板. 我们以CRUD的模板为例,默认的gi ...
- 纯js自动批量引入js、css插件，支持自定义参数
//autoload.js ;! function(e) { var autoload = e.autoload || {}; e.autoload = autoload; e.autoload = ...
- 第十一节：Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
随机推荐
- Java中volatile如何保证long和double的原子性操作
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11426473.html 关键字volatile的主要作用是使变量在多个线程间可见,但无法保证原子性,对 ...
- 【leetcode】756. Pyramid Transition Matrix
题目如下: We are stacking blocks to form a pyramid. Each block has a color which is a one letter string, ...
- textAppearance的属性设置
android:textAppearance="?android:attr/textAppearanceSmall" android:textAppearance="?a ...
- BZOJ 1005: [HNOI2008]明明的烦恼(高精度+prufer序)
传送门 解题思路 看到度数和生成树个树,可以想到\(prufer\)序,而一张规定度数的图的生成树个数为\(\frac{(n-2)!}{\prod\limits_{i=1}^n(d(i)-1)!}\) ...
- Redis Cluster 设置密码
两种方式 1.修改配置文件 在每个节点的配置文件里面增加密码选项,一定要加上 masterauth,不然 Redirected 的时候会失败. masterauth redispassword req ...
- 监控软件munin安装设置
准备工作需要web环境需要设置epel源 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo 服务器端安装设置 y ...
- 监督局部线性嵌入算法（SLLE算法）
% SLLE ALGORITHM (using K nearest neighbors) % % [Y] = lle(X,K,dmax,a) % % X = data as D x N matrix ...
- CPython，PyPy？Python和这两个东西有什么关系
https://blog.csdn.net/fu6543210/article/details/90770794 python是一种编程语言.但这种语言有多种实现,而且与其他语言不同,python并没 ...
- VC2008中如何为MFC应用程序添加和删除消息响应函数
最近重温<MFC Windows应用程序设计>第二版这本书,里面的代码全部是使用VC6.0写的,我Win7下安装的是VS2008开发环境. VC2008下添加和删除常见的消息响应函数有两种 ...
- VS2008的使用
文章转载自:http://www.cnblogs.com/aduck/archive/2011/11/11/2245460.html 1.如何在vc2008中显示行号 中文版: 菜单-工具-选项 在新 ...