PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ！

2016年07月29日　05時57分更新

文●Craig Buckler

ツイートする

Sass、Less、Stylusなどのプリプロセッサーよりも柔軟に、必要な機能を選んで使えるCSS変換ツール「PostCSS」。海外のフロントエンド開発界隈で普及しつつある人気ツールの導入方法とおすすめプラグインをチェック。

SitePointではPostCSSの記事を『An Introduction to PostCSS』『How to Use PostCSS with Gulp』『PostCSS Mythbusting: Four PostCSS Myths Busted』などで何度も特集してきましたが、いまだに多くの人が混乱してしまっているようです。PostCSSを一言で表すと、

PostCSSはうんざりするような仕事をあなたの代わりに処理してくれるものです

PostCSSはSass、Less、StylusのようにソースコードをCSSにコンパイルする、簡潔なプログラミング言語を提供するCSSプリプロッセサーとは多少異なります。混乱の一部は、以下のようなことが要因です。

その名前。PostCSSは、ソースコードから本物のCSSプリプロセッサーがコンパイルする前だけでなく、コンパイル後でも機能します
PostCSSはCSSプリプロセッサーに取って代われるかもしれないこと。変数、ネスト、mixin、extendなどの構成を実装するプラグインがあります

PostCSSはあなた自身でもCSSプリプロセッサーを構築できますが、コンパイルのスピードを速くする、機能性を制限したいといった場合を除けば、その理由はほとんどありません。私は自分のCSSを強化するため、ほんの少し味付け程度にSassを使っています。

どのようにPostCSSを使うか

PostCSSはスタンドアローンのJavaScriptファイルやBrunch、Broccoli、Grunt、Gulp、さらに今まで聞いたことのないほど広範囲なタスクランナーでも使えます。

PostCSSは、CSSファイルをJavaScriptのオブジェクトやトークンに解析するだけで、それだけでは何もできません。本領を発揮するのは、CSSファイルが最終的に書かれる前にプロパティや値の追加または変更を調べるプラグインです。

GulpでPostCSSを使うには、プロジェクトにgulpとgulp-postcss両方のモジュールをインストールし設定する必要があります。

npm init
npm install --save-dev gulp gulp-postcss

次に、Autoprefixerやcssnanoなどの必要なプラグインを加えます。

npm install --save-dev autoprefixer cssnano

gulpfile.jsが生成されます。gulpfile.jsはPostCSSから渡されたCSSのソースをパイプしてロードするタスクを定義します。プラグインや必要なオプションは配列でPostCSSに渡されます。最後に、CSSは目的のファイルに出力されます。

// Gulp.js configuration
var gulp = require('gulp'),
    postcss = require('gulp-postcss');

// apply PostCSS plugins
gulp.task('css', function() {
  return gulp.src('src/main.css')
    .pipe(postcss([
      require('autoprefixer')({}),
      require('cssnano')
    ]))
    .pipe(gulp.dest('dest/main.css'));
});

タスクは次のように、コンソールで処理します。

gulp css

これで必要なのは、すぐに使えるPostCSSプラグインのリストだけです。

1.Autoprefixer

ベンダープレフィックスを追加するプラグインを使っていなければ、Autoprefixerをインストールしてください。

npm install --save-dev autoprefixe

-webkit-、-moz-、-ms-のようなブラウザー特有のプレフィックスは徐々に廃れてきています。なぜなら、水準が上がり、ベンダーはフラグを基にしたより良い代替プロパティを選ぶからです。残念なことに、ベンダーのプレフィックスは避けられません。しかし、プレフィックスがいつも必要とされているか（例えばuser-select）、ときどき必要とされているか（例えば3D transformations）、まったく必要とされていないか（例えばborder-radius）を判断するのは難しいです。

Autoprefixerがあればプレフィックスについて心配する必要はなくなります。プレフィックスなしのCSSを定義し、サポートしたいブラウザーを明確にします。Autoprefixerは必要なプレフィックスを追加する前にcaniuse.comをチェックしてくれます。次のコードは、市場のシェアが2％以上のブラウザーや主流のブラウザーのバージョンを2つ特定します。

.pipe(postcss([
  require('autoprefixer')({
    browsers: ['last 2 versions', '> 2%']
  })
]))

このコードは通常、特別なコードを必要としたりベンダープレフィックスを適用するCSSプリプロセッサーのライブラリ関数の優れたオプションです。標準ブラウザーが進化するにつれて、PostCSSから現在のプレフィックスコードもなくなっていくでしょう。

Autoprefixerはとても便利で広く普及しており、PostCSSプラグインと気付かずに使っている可能性もあります。

2.PostCSS Assets

PostCSS Assetsは画像を便利に取り扱える機能が多くあります。

npm install --save-dev postcss-assets

オプションは次のようになります。

URL変換：ファイル名を得られれば、PostCSS Assetsはresolve(image)をルートパスや完全なURLと置き換えます
寸法の取り扱い：PostCSS Assetsはwidth(image)、height(image)、size(image)を1ピクセル単位で置き換えます
画像インライン：PostCSS Assetsはinline(image)をBase64でエンコードされた文字列と置き換えます
キャッシュ防止：PostCSS Assetsは、最新のファイルがロードされていることを確認するために、画像の参照にランダムなクエリ文字列を追加できます

3.cssnext

cssnextは最新のCSS構文が使えます。

npm install --save-dev postcss-cssnext

このプラグインは下記のサポートを含め、多くの特徴があります。

var変数
#rrggbbaa色
色関数
フィルター
フォールバック

cssnextを使うと、現在のブラウザーで一般的にサポートされているCSS構文にコードを変換します。

4.Rucksack

Rucksackは幅広い機能を提供し、CSS開発を楽しくしてくれると開発者は主張しています。

npm install --save-dev rucksack-css

オプションは下記の通りです。

font-size: responsive宣言1つで、行の高さやフォントサイズを調整する、反応の速いタイポグラフィー
4つかそれ以上のアイテムのリストをターゲットにするli:at-least(4)のようなQuantity擬似セレクター
bgをCSS全体で使えるbackgroundと定義するなどのプロパティエイリアス
あらかじめ定義されたeasing functionsのセット

5.Stylelint

Stylelintは共通する誤りを見つけるため、スタイル規制を実装したり、ベストプラクティスを施行したりなど、140ものルールに基づいたCSSのエラーをレポートします。Stylelintを好みにあわせて設定するオプションはたくさんあります。Pavels Jelisejevsの記事『汚いコード書いてない？フロントエンダー必須のPostCSS+Stylelintがいい感じ』ではセットアップの方法の手ほどきをしています。

6.CSS MQPacker

CSS MQPackerは、可能であれば単一のルールでメディアクエリーを最適化します。

npm install --save-dev css-mqpacker

SassのようなCSSプリプロセッサーは宣言内でメディアクエリーの使用を簡単にします。たとえば、次のようなコードです。

.widget1 {
  width: 100%;

  @media (min-width: 30em) {
    width: 50%;
  }

  @media (min-width: 60em) {
    width: 25%;
  }
}

.widget2 {
  width: 100px;

  @media (min-width: 30em) {
    width: 200px;
  }
}

コンパイルすると、つぎのようになります:

.widget1 { width: 100%; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget2 { width: 200px; }
}

ファイルのサイズを小さくしたり、（あるいは）構文解析の回数を改善したりするために、CSS MQPackerは複数の宣言を1つの@mediaルールに圧縮します。すなわち、次のようなコードです。

.widget1 { width: 100%; }
.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
  .widget2 { width: 200px; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

信頼できる情報：コード内の最初のメディアクエリー宣言は、たとえ違いがなくても選択した順序でオプションを定義します。これでCSS MQPackerが正しい順序でルールを定義することが保証されます。

CSS MQPackerはソースマップをアウトプットしたり、メディアクエリーをソートするオプションも装備しています。

7.cssnano

cssnanoは、本番環境にダウンロードされるCSSファイルがなるべく小さくおさまるように構成します。下記のコードでインストールできます。

npm install --save-dev cssnano

このプラグインを使うと、コメントや余白、複製のルール、旧式のプレフィクスの削減とほかの最適化を合わせて、少なくとも50%の容量に抑えられます。ほかの有用な選択肢もありますが、cssnanoはもっとも優れたものの1つなのでぜひ使ってください。

もっと詳しく知りたい場合

PostCSSプラグインのインデックスはpostcss.partsで検索できます。PostCSS使用方法のドキュメントには、おすすめのオプションのリストがあります。あらゆるCSSタスクのプラグインがみつかりますが、機能が重複している（たとえば、Autoprefixerを含むcssnext）もあるので気を付けてください。

さらに必要な場合は、JavaScriptでPostCSSを作れます。PostCSSドキュメンテーションはプラグインの書き方の説明、APIリファレンスがあります。

PostCSSはプリプロセッサーを使っているかに関わらず、CSS開発を簡単にしてくれます。PostCssが削減するCSS開発時間は、初期のインストールや設定にかかる手間と天秤にかけても値打ちがあります。

（原文：7 PostCSS Plugins to Ease You into PostCSS）

［翻訳：Karin Hwang］
［編集：Livit］

Web Professionalトップへ