やまろぐはてな

yamanokuの技術メモ。Qiitaは怖くて書けない。

CSSプロパティの記述順について - CSScomb解決編

yamanoku.hatenablog.com

以前CSSプロパティの記述順に対してどうするかなどと悩んでいましたが、1つの解決策を見つけました。

CSScombを使用してみる

自分で記述順を悩むなんてアホくさいので機械に全部処理してもらうということになりました。というわけで以下をインストール。

CSScomb: Makes your code beautiful

npm install csscomb --save-dev 

CSScombってどういうものなの

CSScombはcssのプロパティの整形をしてくれるプラグインで、sublimeTextにもパッケージがあります。整形はpleeeaseでもできそうな気がしたけど、思っているプロパティ整理はなさそうなので有用そうなものを使用してみました。

以下はgulpを使っているので他の記述とは異なる箇所もあるのでご了承ください。

gulpfile.js

var conf = require('./config.json');
var gulp = require('gulp');
var comb = require('gulp-csscomb');

gulp.task('style', function() {
  gulp.src(conf.PATH.css)
    .pipe(csscomb())
    .pipe(gulp.dest('./src' + conf.URL + 'css'))
});

// 僕の環境ではこんな感じ
gulp.task('stylus', function () {
  gulp.src(conf.PATH.stylus)
  .pipe($.plumber())
  .pipe($.stylus({
    use: function(style) {
      for(key in conf) {
        style.define(key, conf[key]);
      }
    }
  }))
  .pipe($.pleeease({
    autoprefixer: ['last 2 versions','iOS >= 8','Android >= 4'],
    rem: false,
    mqpacker: true,
    minifier: false
  }))
  .pipe(comb())
  .pipe(gulp.dest('./src' + conf.URL + 'css'))
});

config.json

{
      "TITLE": "test",
      "URL": "/",
      "hostname": "localhost",
      "PATH": {
            "css"        : ["css/**/*.css", "!css/_**/*.css"],
            "stylus"    : ["stylus/**/*.styl", "!stylus/_**/*.styl"],
      }
}

出力先のdestとかPATH設定とかは各自ご自由に。comb()追加するだけでやってくれます。

整形の設定を変えたい

gulpを走らせて、保存すれば自動的にcombしてくれるのですがこんな感じです。

f:id:cardboarder:20160508211041p:plain

いわゆるデフォルトのソート順であったり、それぞれのプロパティの関連順に整列して1段空きがあったりなど、整形はしてくれたけど見た感じは微妙な感じかもしれません。また、このデフォルトの記述欄整形では他の人との連携でルールが明確で無いのでやりづらいのでこのままでは求めている記述順の正攻法にはなりません。

なのでCSScombの設定(config)をいじります。以下にアクセスどうぞ。

CSScomb: Build config

ここではどのような整形ルールにするかを設定できます。やってほしいrulesetを選んで順々に進めていきます(計24個) すると設定をしてくれたjsonを吐き出すのでこれを .csscomb.json と命名して、gulpfile.jsと同じ階層のディレクトリに保存します。(もしくはプロジェクトのルートフォルダ)

んで整形したのが以下の感じです。

f:id:cardboarder:20160508212012p:plain

アルファベット順の整形、ベンダープレフィックスの頭揃え、カラーコードは小文字で3文字省略できるものは省略するなどでいじりました。

ちなみに自分で設定した.csscomb.jsonはこんな感じです。ご参考までにどうぞ。

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": false,
    "leading-zero": false,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "sort-order": ["..."],
    "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",
    "tab-size": true
}

これでcssだけ弄る人でもconfigルールを明確にしとけば、混乱はないんじゃないのかなと思います。テンプレートと素のcssとの併合とか考えだすとめんどくさくなるのでひとまずこれでいきましょう。

余談ではありますが

もしアルファベット順ではなく独自の記述順がある際は sort-order で設定できたりします。なんかより分かりづらくなりそうですが。

"sort-order": [
    [
    "font",
    "font-family",
    "font-size",
    "font-weight",
    "font-style",
    "font-variant",
    "font-size-adjust",
    "font-stretch",
    "font-effect",
    "font-emphasize",
    "font-emphasize-position",
    "font-emphasize-style",
    "font-smooth",
    "line-height"
    ]
]

割とスッキリできたので皆様もご参考にどうぞ。こちらからは以上です

参考

qiita.com

blog.sakurachiro.com

katoken.hatenadiary.jp