摘要：属性排序插件配置参数大全图片介绍如下所示点击进去更详细空行产生的原因以及解决方法原因由于官方文档将属相按照单字定位展示大小样式进行排序所以会产生空行，表示其实一类。
sublime插件CSScomb介绍CSScomb 是一个超级爽的前端css属性排序工具，用来规则css, make your code more beautiful
官方网站只有一句如插件作用的介绍 Makes your code beautiful(让你的代码更漂亮) 。使用它可以帮助你重新排序CSS中定义的属性，帮助你按照你预定义的排序格式生成新的CSS。会按照你想要的格式定义 css 空格，换行，缩进，代码编写方式。
CssComb的特点:
1. 自定义css属性排序规则； 2. 代码作用不发生变化，只是格式变化 3. 完全支持CSS2/CSS2.1/CSS3和CSS4； 4. 支持在线排序和本地编辑器安装在线排序格式化css
CssComb在线地址
排序代码如下图片所示，没有高亮所以不是很好看。
本地编辑器 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 有什么问题就仔细看下我给的链接和图片。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115102.html
摘要：效果如下配置方法参考下的配置方法完美支持提供了比默认更好的语法高亮，而且他完美支持。语法高亮默认安装的对的支持让人抓狂，帧动画别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光，我建议用完全替代原来的来完成语法高亮。 文章转载自本人的博客《三省吾身丶丶》点击查看喜欢的话请疯狂的推荐吧！ ^_^ 本文章会在本人有插件或者设置更新时，进行不定时更新 偷懒了，图片地址直接设置的博客...
摘要：此时你只需要在问题出现时，去问谷歌。附一个我目前遇到所有用过的属性，在的梳理后，如果你能手写出谷歌首页，那么你一定会了解它们的用法。 问题 有时候会觉得自己在写 css 时没有什么章法，因为 css 的属性很多，又有一些继承不继承的关系，还有一些相互影响的属性需要注意。总之就是觉得写 css 好费劲，不如写编程语言的逻辑清晰明了。 干货 手写 css 很重要 对于简单页面，嵌套...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
阅读 793·2021-09-30 09:58
阅读 2622·2021-09-09 11:55
阅读 1819·2021-09-01 11:41
阅读 790·2019-08-30 15:55
阅读 3078·2019-08-30 12:50
阅读 3355·2019-08-29 18:37
阅读 3162·2019-08-29 16:37
阅读 1885·2019-08-29 13:00
