CSSのプロパティ順を並び替えたり、特定のコーディング規約に則ったソースコードに整形してくれるCSScombはとても便利です。自分はこれをGruntで動かしてるのですが、しかしデフォルトの整形結果が好ましくない。じゃあ自分で好きなように整形方法を設定しようということでメモします。Gruntの使い方そのものは既に分かりやすい記事が沢山あるので触れません。動画ではドットインストールが分かりやすいかなと思います。GruntのCSScombのオプションで設定ファイルを指定まず、grunt-csscombのページを参考にオプションで設定ファイルを指定しておきます。module.exports = function (grunt) { //CSScombの読み込み grunt.loadNpmTasks('grunt-csscomb'); //初期化処理 grunt.initConfig({ csscomb: { options: { config: 'csscomb-config.json' //設定ファイルのパスを指定 }, main: { files: { 'style.css': ['style.css'] } } } }); //タスクの登録 grunt.registerTask('css-comb', ['csscomb']);}CSSCombの設定ファイルはjsonで記述します。ファイル名は好きな名前で大丈夫で、上の指定はルートに「csscomb-config.json」という設定ファイルを置いた場合になります。例えば”config”というフォルダに設定ファイルを置いた場合は「config: ‘config/csscomb-config.json’」になります。任意の設定ファイルを使うCSScombで任意の設定ファイルを用意する方法は主に3つあります。既に作られた設定ファイルを使うドキュメントを見て一から記述していくジェネレータを使う既に作られたファイルを使うCSScombには既に3つの設定ファイルが用意されていますので、これを使えばすぐに別の整形方法に変えられます。「csscomb.json」「yandex.json」「zen.json」とあるので、それぞれを試して希望の整形になっていたらそのまま使っちゃいましょう。ドキュメントを見て一から記述してく大変ですが、こちらのドキュメントを見ながら設定ファイルを一から記述していく方法です。上で挙げた設定ファイルを参考にしながら作ると良いかもしれません。ただ、もっと簡単に設定ファイルを作成する方法が用意されています。せっかくなのでこちらを使ってみましょう。ジェネレータを使うCSScombの公式ページには設定ファイルのジェネレータがあります。整形方法を1つずつ選んでいく方式です。例えばこんな感じでどちらかをクリックして選択していきます。（2014年9月現在、選択は全部で24個です）「ルールセットの下にスペースを加える？それとも手を加えない？」（上の画像では「Remove empty rulesets」と書いてありますが、正しくは「Add empty rulesets」だと思います…、スペースが追加されたので。一つ目の選択肢だけ単語間違いがあるようです）黄色くハイライトされた部分が手を加える箇所で、「Leave code untouched」はコードに手を加えないという意味になります。そして全て選択し終わるとソースコードが吐出されるので、これを先ほど用意した設定ファイルに貼り付けましょう。めちゃくちゃに選んだ例CSSプロパティの並び順とかその他の設定はジェネレータで生成できない点に注意です。CSScombを実行Gruntfile.jsで指定した設定ファイルのパスが間違っていなければ、実行するとこのように表示されます。D:\Web\projects>grunt css-combRunning "csscomb:main" (csscomb) task>> Using custom config file "csscomb-config.json"...>> Sorting file "style.css"...Done, without errors.3行目の部分で「Using custom config file」と出ていますね。このようにカスタムファイルを使ってるよ～とメッセージが出ていれば成功です。最後におまけで、自分が今暫定的に使っている設定ファイルを載せておきます。ジェネレータで生成した結果に、公式の整形ファイルからプロパティの並び順をコピーした内容です。CSSComb setting JSON file
