CSScombについてのおさらい

#CSScombとは？
<img alt="CSScomb" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221915/a1d292a1-78be-8d29-341f-dd548a82cda9.png" style="display:block; width:100%; max-width:853px; margin:0 auto;">
> CSScomb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.
（CSScombは、CSSのコーディングスタイルフォーマッタです。 独自の構成を簡単に記述して、スタイルシートを美しく一貫性のあるものにすることができます。）

https://github.com/csscomb/csscomb.js README.mdより抜粋

つまり**CSS**の**プロパティ**を決められたルールで**並び替える**ことができるツールです。
現在、**CSS**はたいてい何かしらの**メタ言語**で書かれていると思いますが、**CSScomb**はコンパイル後の**CSS**だけでなく**SCSS**にも対応[^1]しているので、作業中の並び順を意識しなければならない煩わしさや、ルールを記憶する学習コストから開放されます。

#3種類のプリセット

**CSScomb**にはデフォルトで以下の3つの設定が用意されています。
**csscomb**
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
**yandex**
https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json
**zen**
https://github.com/csscomb/csscomb.js/blob/master/config/zen.json

とはいえ所属するグループやプロジェクトごとにルールが決められている場合にはプリセットでは対応しきれません。
その場合、上記の設定などを参考に独自の**.csscomb.json**を用意する必要があります。

上記のプリセットはいずれも**プロパティの種類**ごとに分別していますが、**google**のCSSガイドは**アルファベット順**になっています。
**Google HTML/CSS Style Guide**
https://google.github.io/styleguide/htmlcssguide.html#Declaration_Order

ちなみにアルファベット順にする設定は

```json:.csscomb.json
{
  "sort-order-fallback": "abc",
  "sort-order": []
}
```
です。
`sort-order`の記述がないと動作しない[^2]ようです。下記サービスにて作成される場合は手動で追加する必要がありますのでご注意ください。

**CSScomb: Build config**
https://csscomb.herokuapp.com/config
こちらは24個の質問に答えるだけで簡単にオリジナルの**.csscomb.json**が作成できる便利なサービスです。

#VSCodeで使う

以下の拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb

プリセットではなく自分で用意した**.csscomb.json**を使用する場合には
`⌘ + Shift + P`で**コマンドパレット**を開き、`「settingjson」`と入力し候補から`「Preferences: Open Settings(JSON)」`を選択し、**settings.json**を開きます。
<img alt="コマンドパレット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221915/8e5ac43e-061c-afe1-92eb-c331ec2bdbbe.png" style="display:block; width:100%; max-width:617px; margin:0 auto;">
そこに用意した**.csscomb.json**のパスを追記します。
たとえば`Macintosh HD > ユーザ > (ユーザ名)`ディレクトリ直下に置く場合は、

```json:.csscomb.json
{
  "csscomb.preset": "~/.csscomb.json"
}
```
となります。

あとは並べ替えたい**CSS（SCSS）**で`⌘ + Shift + P`で**コマンドパレット**[^3]を開き、`「csscomb」`と入力し候補から`「CSSComb: Format styles」`を選択します。

#Gulp(ver.4)で使う
**gulp**
https://www.npmjs.com/package/gulp

```javascript:gulpfile.js
const csscomb = require('gulp-csscomb');
const sass = require('gulp-sass');

// SCSSの並び替え
function scsscomb() {
  return gulp
    .src('./src/_scss/**/*.scss')
    .pipe(csscomb())
    .pipe(gulp.dest('./src/_scss'));
}

// SCSSのコンパイル
function styles() {
  return gulp
    .src('./src/_scss/**/*.scss')
    .pipe(sass())
    .pipe(csscomb())
    .pipe(gulp.dest('./build/css'));
}
```
直接、**csscomb**タスクを実行してもいいですが、個人的には**gulp**の**build**タスクあたりに含めておくのが、実行忘れ防止になっておすすめです。
**watch**タスクも試してみたのですが、**scss**ファイルの入力途中で**csscomb**が実行されてしまうと、ネスト化しているときなど、大きく崩れてしまったりして使い勝手が悪かったです。また**watch**時では処理の無限ループ回避のために**gulp-cached**[^4]を利用する必要があります。

#まとめ
コンパイル後の**CSS**にはすでに**CSScomb**を活用している方は多いと思いますが、**SCSS**には適用していない方が意外と多い（※個人的所感です）のではないかと思い、この機会におさらいしてみました。
**SCSS**にも適用することは、**学習コストの低減**、**属人性の解消**、**作業効率の向上**が見込めるので、よいのではないかと思いました。

#参考サイト
1. 【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する | バシャログ。 http://bashalog.c-brains.jp/14/12/01-202258.php
2. [CSScomb] sort-order-fallback が効かない - Web - HomeMadeGarbage https://homemadegarbage.com/csscomb-sort-order-fallback-notwork
3. gulpで編集中のscssファイルをwatchしてCSScombした話 | MAISON MARC Tech blog https://www.wantedly.com/companies/maisonmarc/post_articles/138053
4. [Gulp]コンパイル前のsassファイル（*.scss）をcssCombする - Qiita https://qiita.com/s-kato/items/c58af68057d6105dd648

[^1]: Sass、Stylus、LESSは未対応です。
[^2]: 詳しくは参考サイト2を参照ください。
[^3]: ショートカットキーを割り振るのも便利かと思いますが、個人的には学習コストの低さから、基本的にはコマンドパレットからの操作がよいと思っています。
[^4]: 詳しくは参考サイト3を参照ください。