altCSSを捨ててPostCSSで活きよう!

こんにちは!
Misoca開発チームのめろたん(@renyamizuno_)です!

髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。

f:id:renya-mizuno:20160728155553p:plain

この写真は先日 きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。

f:id:renya-mizuno:20160728160041j:plain

すごく綺麗で泳いだのですが、まぁまぁ寒かったです。

最近はポケモンGOにはまっています。
会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、 ポケモンも集まるし、社員も集まってきます。

はい。

今回はPostCSSについて書きたいと思います。

PostCSS

github.com

そもそもPostCSSとは、Node.jsで作られたCSSのパーサでASTを操作することで色々できるといったものになります。 なので、PostCSSだけ導入しても何も起きません。
各PostCSS-pluginを追加することで、出力結果に違いが出てきます。

一番有名なのは、Autoprefixerですね。

github.com

CSSを書いているとどうしてもベンダープレフィックスが必要になってくる場合があります。
それを毎回書くのはとてもつらいので、それをAutoprefixerが自動でやってくれます。

a {
    display: flex;
}

このCSS

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

このように自動でプレフィックスをつけてくれます。

Sassで書くと

a {    
    @include display-flex;
}

のように書かないといけなくて、CSSだけの知識では書けず、またベンダープレフィックスが不要になった時に書きなおしたりする必要が出てきてしまいます。
一方PostCSSではCSSしか書いていません。そのためベンダープレフィックスが不要になったときは、PostCSSを使わないようにすればいい。 という風に機転がききます。

このようにPostCSSのいいところは基本的にCSSを書くだけで良い。と言うところだと思っています。*1

PostCSSでトランスパイル

最近はJavaScriptを書くときにBabelを使ってES2015, ES2016をトランスパイルして使おうと言うような話が多くあると思います。
ですが、CSSではそのような話は滅多に聞きませんでした。

しかし、PostCSSのおかげで次世代のCSS構文が使えるようになりました。

例えばCSS内で変数を使いたい。というようなことは多くあったと思います。そのためSass等altCSSを使用して、変数を使っていたと思います。

$hoge-color: red;

.hoge {
  color: $hoge-color;
}

上のようなコードです。
もちろんブラウザでは動きません。
ですが、W3CCSS Custom Properties for Cascading Variables Module Level 1のような書き方でも変数を扱うことが出来ます。

:root {
  --hoge-color: red;
}

.hoge {
  color: var(--hoge-color);
}

ブラウザによってはこれで動きます(http://caniuse.com/#feat=css-variables)が対応していないブラウザもあります。

そこでPostCSSです。

github.com

このプラグインを使うことで、上のコードが

.hoge {
  color: red;
}

というふうに変換されます。

以上のような次世代のCSS構文を書けるようにするプラグインが他にもたくさんあります。

プラグインPostCSS.partsというサイトがあって、そこで検索することが出来ます。
とても便利です。

個人的なおすすめプラグインnestedです。
scssみたいに&を使うことが出来るようになります。

.hoge {
  color: red;
  &_huga {
    color: blue;
  }
}

出力は

.hoge {
  color: red;
}

.hoge_huga {
  color: blue;
}

となります。

まとめ

PostCSSの利点は

  • 基本的にCSSを書くだけで良い(altCSSの独自構文等をおぼえる必要がない)。
  • 各々が小さいプラグインとしてあるので、自分に必要なものだけを選んで適用できる。

になるかと思います。

また、PostCSSはaltCSSに比べるとコンパイルが速い。という話があったりしますが、個人的には体感出来たことがないのと、 そもそも性質が違う*2ので今回は触れませんでした。

最後に、

MisocaではPostCSSでナウいアプリケーションを作りたいというエンジニアを募集しています。

www.wantedly.com

*1:もちろん導入するプラグインによってはその限りではありません。

*2:PostCSSはプラグイン入れないとパースするだけで、altCSSはパースするだけじゃない