1. ホーム
  2. コラム
  3. プラグインでCSSを書きやすく!postCSSとは?

プラグインでCSSを書きやすく!postCSSとは?

postCSS

SassやLESSなどのCSSプリプロセッサが台頭している中、最近PostCSSに関してもよく使われるようになってきました。
stylusをよく使用する身としては、どのように違うのか興味がありましたので、調査して、特徴をまとめてみます。

PostCSSとは?

PostCSSはブラウザや端末などの環境に即したCSSを、効率的に出力するツールと言えます。
SassやLESS、stylusなどの似たようなCSSプリプロセッサありますが、それらと異なるところは、JavaScriptでの高い拡張性です。

必要なプラグインを追加する形なので拡張しやすい

PostCSSはNode.jsで作られており、機能の追加はプラグインで拡張することによって行います。
さまざまな機能をオールインワンで導入するCSSプリプロセッサとは異なり、制作者は最低限必要なプラグインを自由にカスタマイズして環境を整えることができます。
例えば、CSSのLintチェック(stylelint)や、変数やMixinの導入(precss)、次世代CSS記法(cssnext)など、それぞれにプラグインが存在します。
これらの機能が不要な場合は設定から外し、別の機能が必要な場合はプラグインを探して導入していくスタイルがPostCSSでは求められます。

次世代のCSS記法が使える

プラグインを利用すれば、次世代のCSSで記述しPostCSSによって変換して、各ブラウザに理解できるCSS記法にすることができます。
ただ、勧告前の仕様は確定しているわけではないので、使うプロパティがプラグインで対応しているかは下記を確認することをおすすめします。
http://cssnext.io/features/

エコシステムで、流行り廃りに柔軟に対応できる

CSSプリプロセッサはパッケージごとにメンテナンスが行われるため、利用者が減ればメンテナンスの必要性も少なくなり、更新されなくなる可能性もあります。
対して、プラグインで機能を実装するPostCSSはCSSをコンパイルするコアの部分は最小限に止め、各機能のメンテナンスは各プラグインに委ねられます。
管理が分散する分、更新頻度が高くなるのではないかと考えられます。

SassやLESS, stylusなどのコードが再利用できる

postCSS導入前のコードがプラグインを導入することによってそのまま使えます。

移行にあたって懸念することもある

移行を後押しするような良い点について書きましたが、懸念も見えてきました。
以下はそのような点をまとめています。

別のCSSプリプロセッサから移行しなくても使える機能もおおい

例えばベンダープレフィックスの追加などが挙げられます。
各CSSプリプロセッサのMixin機能で、使用するベンダープレフィックスを自作で付与するケースもあるので、必ずpostCSSの機能を使う必要もありません。
(ただ、CSSプロパティの対応ブラウザ具合に応じてベンダープレフィックスを自動的に付与するなど行う場合はpostCSSとそのプラグインAutoprefixerを使用した方がよいと思います。)
このあたりは使用している機能に応じて、postCSSの機能を使うべきか、既存のCSSプリプロセッサを使用するべきかを判断していくことになりそうです。

設定に時間がかかるかもしれない

ビルド環境(GulpやGrunt、webpackなど)が既にできていれば、プラグインの設定を追加するだけなので簡単に導入できるかと思います。
プラグインの設定もこれまでの設定をそのまま流用できるまでとはいかないので、都度書き直しが必要になります。

まとめ

調査してみたところ、将来性を考えるとpostCSSに移行しても損は無いかと思います。
ただ、既にあるタスクを変更して、同じ動きをするか検証するコストを考えると、既存プロジェクトで使うよりは新規プロジェクトで使い始めたほうが負担は少ないかと思うので、タイミングを見て導入していくべきと考えます。

■コラム執筆者
BU1-17 佐々木 隆弘

カテゴリ: Webサイト構築, Webサイト運用運営
2016年09月30日

RSS