Help us understand the problem. What is going on with this article?

CSScombについてのおさらい

CSScombとは?

CSScomb

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

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

.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を開きます。
コマンドパレット
そこに用意した.csscomb.jsonのパスを追記します。
たとえばMacintosh HD > ユーザ > (ユーザ名)ディレクトリ直下に置く場合は、

.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

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タスクを実行してもいいですが、個人的にはgulpbuildタスクあたりに含めておくのが、実行忘れ防止になっておすすめです。
watchタスクも試してみたのですが、scssファイルの入力途中でcsscombが実行されてしまうと、ネスト化しているときなど、大きく崩れてしまったりして使い勝手が悪かったです。またwatch時では処理の無限ループ回避のためにgulp-cached4を利用する必要があります。

まとめ

コンパイル後の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を参照ください。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした