以前CSSプロパティの記述順に対してどうするかなどと悩んでいましたが、１つの解決策を見つけました。
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してくれるのですがこんな感じです。
いわゆるデフォルトのソート順であったり、それぞれのプロパティの関連順に整列して1段空きがあったりなど、整形はしてくれたけど見た感じは微妙な感じかもしれません。また、このデフォルトの記述欄整形では他の人との連携でルールが明確で無いのでやりづらいのでこのままでは求めている記述順の正攻法にはなりません。
なのでCSScombの設定（config）をいじります。以下にアクセスどうぞ。
ここではどのような整形ルールにするかを設定できます。やってほしいrulesetを選んで順々に進めていきます（計２４個） すると設定をしてくれたjsonを吐き出すのでこれを .csscomb.json と命名して、gulpfile.jsと同じ階層のディレクトリに保存します。（もしくはプロジェクトのルートフォルダ）
んで整形したのが以下の感じです。
アルファベット順の整形、ベンダープレフィックスの頭揃え、カラーコードは小文字で３文字省略できるものは省略するなどでいじりました。
ちなみに自分で設定した.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"
]
]
割とスッキリできたので皆様もご参考にどうぞ。こちらからは以上です。
