CSScomb
是一个超级爽的前端css属性排序工具,用来规则css, make your code more beautiful
sublime插件CSScomb介绍
官方网站只有一句如插件作用的介绍 Makes your code beautiful(让你的代码更漂亮)
。使用它可以帮助你重新排序CSS中定义的属性,帮助你按照你预定义的排序格式生成新的CSS。会按照你想要的格式定义 css
空格,换行,缩进,代码编写方式。
CssComb的特点:
1. 自定义css属性排序规则;
2. 代码作用不发生变化,只是格式变化
3. 完全支持CSS2/CSS2.1/CSS3和CSS4;
4. 支持在线排序和本地编辑器安装
在线排序格式化css
排序代码如下图片所示,没有高亮所以不是很好看。
本地编辑器 sublime
安装csscomb插件
在线的毕竟只是测试,功能单一,无法自定义。在此,我用sublime安装,因为sublime是我最喜欢用的前端编辑器。
安装使用过程如下:
首先你要安装node,然后才可以用,很多插件都需要使用node的,推荐你学习安装,这里不多介绍。
在sublime中按ctrl+shift+p然后搜索
CssComb
确认进行下载。点击preferences->packages-settings->CSScomb->settins-default将第四行的
"node-path" : ":/usr/local/bin"
,改为你自己的node下面bin安装的的路径,我的是"node-path" : ":/usr/local/bin"
.改路径可以先跳过去,执行第四步骤,如果没有生效再来改路径。选中css代码然后按默认快捷键
ctr+shift+c
即可,如果冲突了可以重新自定义,很多是快捷键冲突失效。
生效后如下所示:
排序之前:
#header {height: 42px;
position: relative;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
排序之后:
#header {
position: relative;
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
可以看到 {}
和空格,缩进, 属性顺序
都发生了变化。但是产生了两个问题。
缩进的多少,标签风格可能不是我喜欢的类型。
中间多了几个空行,看起来很别扭。
别着急,这些问题在下面自定义配置之后都可以解决。
自定义配置csscomb风格
-
在线简单配置参数 按照细节喜欢的风格选择完之后会生成一个配置完的
json
文件。选择风格如下所示:
选择完成后如下所示:
上面这只是在线的简单配置,大家还是看不太懂。接下来给大家分享一个详细的自定义配置网站内容介绍。 CSS属性排序 CSScomb 插件配置参数大全
图片介绍如下所示:(点击进去更详细)
CSScomb空行产生的原因以及解决方法
原因由于官方文档将css属相按照
单字 定位 展示 大小
样式进行排序,所以会产生空行,表示其实一类。-
解决方法:
在sublime中下载` CSS Format `插件,然后执行 edit->css format->expanded 即可此时空行将会消除。
解决之后的代码如下所示:(markdown插入图片比较麻烦就不用图片展示了)
#header {
position: relative;
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
CSScomb属性排序如何排性能更好
上面说了默认的排序是 单字 定位 展示 大小
,虽然排版好看了,但是性能并不是最好的。如果一个元素都不可见,那还要什么定位和大小,样式呢?那样是不是浪费渲染性能了。
更好的顺序应该是: 显示属性 自身属性 文本属性和其他修饰属性
如下图所示:
好了,到这里把CSScomb算是终于讲完了,希望你能配置成功,跟好的利用。make your code beautiful 有什么问题就仔细看下我给的链接和图片。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。