介绍一下CSScomb

发表于 更新于
本文字数： 2.7k 阅读时长 ≈ 5 分钟

CSScomb近况

  1. 这个“工具”（姑且让我这么叫），在《Web前端开发最佳实践》里，被推荐了。
  2. github上可以看到项目始于2013.07.31，比较早了，最近的一次commit则是发生在2017.08.10（本文18年10月），感觉已经有点落寞了。
  3. 在作者的twitter上写着“I’m looking for a new maintainer for CSScomb project. If you’d like to help in any way, please write me to tonyganch+csscomb@gmail.com.”
  4. 我个人的理解，它是针对CSS的，而现在更多的，我们会对使用些预处理或者后处理工具，已经很少去编写原生的CSS了。CSScomb没有相应的支持更新，难免有各种各样的bug，对比美化格式、属性排序的优势，最终促成了大家对它的逐渐放手，也许未来会像jQuery那样吧。

CSScomb简介

  1. 官网上只有短短的一句话：“Makes your code beautiful”，图标是一个一看就很柔软的木梳子。
  2. 通过NPM可以安装CSScomb(npm i csscomb)，一些编辑器上也有它的插件。
  3. 配置规则的方法也很简单
    • 在根目录下放一个.csscomb.json
    • 写一个.css文件做模版

  4. 使用方法也很简单

    • 命令行csscomb assets/css

    • 模块引用方式

      1
      2
      3
      var Comb = require('csscomb')
      var comb = new Comb('zen')
      comb.processPath('assets/css')

漂亮的官网

  1. 官网可以说非常的简洁干净了，这感觉真的舒爽。
  2. 一个getting started，一个build config，一个try online，然后放上自己的github和twitter，放上一些工具的插件，没了
  3. 这里要说他的build config，这个真的挺棒的，通过24个option来自定义自己的配置，而且不是洋洋洒洒列出一堆api或者参数说明，而是直接来了个选择题——每个option都给出sample，让用户选择，最后生成整套规则。而且每个sample，都用黄色标出改动，简直在看自己的记号笔标记。

  4. 我设置了24个选项之后的结果，保存为.csscomb.json即可。注意，这里是通过官网的简单设置的出来的，其实还有进一步的设置配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    {
      "remove-empty-rulesets": true,
      "always-semicolon": true,
      "color-case": "upper",
      "block-indent": "  ",
      "color-shorthand": false,
      "element-case": "lower",
      "leading-zero": false,
      "quotes": "double",
      "sort-order-fallback": "abc",
      "space-before-colon": "",
      "space-after-colon": " ",
      "space-before-combinator": " ",
      "space-after-combinator": " ",
      "space-between-declarations": "\n",
      "space-before-opening-brace": " ",
      "space-after-opening-brace": "\n",
      "space-after-selector-delimiter": " ",
      "space-before-selector-delimiter": "",
      "space-before-closing-brace": "\n",
      "strip-spaces": true,
      "tab-size": true,
      "unitless-zero": true,
      "vendor-prefix-align": true
    }

关于CSScomb使用的一些问题

更多的配置

  1. 除了在官网跟着步骤做一些定制化，在CSScomb的github上，还有进一步的配置可以追加。
  2. 比如我们可以就简单的选择github上这个csscomb.json文件。里面包含了exclude和sort-order，将里面的内容平级地放进之前的.csscomb.json里的对象里即可

在Visual Studio Code里使用

  1. 安装插件CSScomb
  2. 搜索一下关键字csscomb.修改配置
    1. 保存时自动格式化：csscomb.formatOnSave，设为true的时候，就比较方便了，否则一般是通过选择命令CSSComb: Format styles来进行
    2. 增加用户配置："csscomb.preset": {}，然后在里面写进本应该放在项目的根目录下的.csscomb.json里的内容，就能让编辑器自己帮我们格式化了。

CSScomb的工程化

  1. 在NPM上可以搜到一个叫做csscomb-webpack-plugin的插件

  2. 只需要在Webpack配置里增加一些配置即可在构建的过程应用。

    1
    2
    3
    4
    5
    6
    const CSSCombPlugin = require('csscomb-webpack-plugin');
    module.exports = {
      plugins: [
        new CSSCombPlugin(options),
      ]
    }

最后说点感想

  1. 配置其实都很赞，用了之后真的让人有一种都快要感染美观强迫症的感受。随便举例：
    1. 比如让颜色的十六进制都大写或者都小写、是否补全十六进制的位数，
    2. 比如按照字母表排序css属性
    3. 比如冒号前后加不加空格
    4. 比如单引号双引号
    5. 比如选择器和花括号换行之类的
    6. 比如对前缀做格式美化，哎呀这个太美了。
  2. 从某种角度说，其实这个插件非常适合新手。CSS代码的逻辑性并不强，一般的开发者写CSS样式也很随意，比如你写成一行都没问题——事实上代码压缩工具就是这么干的，移除了所有空格和格式。这个插件有助于培养新手良好的代码风格。
  3. 从代码的可读性和可维护性角度来考虑，在开发过程中可以防止属性的重复定义，后续维护过程中能快速定位特定的样式属性。
  4. 用来看别人的CSS代码也很方便（虽然谷歌开发者工具里可一键格式化，但是毕竟不是你想要的那种格式），调试的时候会看的更明白更清晰。
  5. 希望CSScomb能有第二春。