PostCSSから5年、CSSの今とこれから

はじめに

今日は、PostCSSに関する簡単な説明と鉄板プラグインをいくつかご紹介します。
また、PostCSSが５年目を迎えたということで、PostCSSの開発者、Audrey SitnikがPostCSSやCSSの今とこれからに関するブログを書いています。

ここから、気になった部分を抜粋してご紹介します。

Artboard Copy 92.png (188.7 kB)

PostCSSとは

PostCSSはJavaScriptのプラグインを使って、CSSを拡張/変換することができるツールです。

これらのプラグインはCSSを最適化してくれるlintツール、変数やmixinをサポートしてくれるもの、未来のCSS文法をトランスパイルしたり画像をインラインで挿入したりしてくれます。

Artboard Copy 91.png (92.0 kB)

また、他のプリプロセッサよりも早いと言われています…!

PostCSSはWikipediaやTwitter、FacebookやGitHub, Googleなどで導入されています。

PostCSSの定番プラグイン

PostCSSの時に一番大事なのが、どのプラグインを使うかなのですが、そういう人のために鉄板のプラグインがあるので、いくつかご紹介…！

autoprefixer

言わずと知れたプラグインです！

Can I Useのデータから必要なベンダープレフィックスを取ってきて、自動で付与してくれます。

もともとautoprefixer とPostCSSの開発者が同じなのでぜひ…!

precss

CSS内でSassのような文法が使える

postcss-assets

画像などのアセットを管理できるプラグイン。
画像サイズを取ってきたり、インラインしてくれたりする。

stylelint

CSSのモダンlinterのプラグイン。

cssnano

CSSを圧縮してくれるプラグイン。

lost

パワフルなグリッドシステム。
これもすごく便利です。

.ColumnSection__grid div {
    lost-column: 1/1;
}

@media (min-width: 400px) {
    .ColumnSection__grid div {
        lost-column: 1/3;
    }
}

@media (min-width: 900px) {
    .ColumnSection__grid div {
        lost-column: 1/6;
    }
}

このコードで、0~400px の間は１カラムに、 400-900pxの間は３カラムに、900px~は6カラムになります。

CSSの今

PostCSSは今年の11月で5年目を迎えました！

それに伴い、PostCSSの開発者のAudrey SitnikがPostCSSやCSSの今とこれからに関するブログを書いています。

そこから、個人的に気になったものを抜粋してご紹介します。

元の記事はこちらなので、気になった方はぜひ…!

PostCSSは今フロントエンドツールでもっとも人気のツールの１つ

image.png (260.4 kB)
(Five years of PostCSS:State of the Unionより)

HTMLのPostHTML, MarkdownのRemark, テキストのRetext などPost CSSの概念を別の言語に引き継いだものが出てきている
PostCSSのプラグインである easing-gradient は標準のCSS設計に組み込まれはじめていて、現在CSS Working Group Level 4 draft担っています。
- こちらに関しては、　別の記事でも触れているので興味がある方はどうぞ。グラデーションを自然に！Easing Gradientプラグイン
  - 他にもCSSグリッドと違うアプローチでのグリッドレイアウトを実現しようとする postcss-grid-kiss
    文法はこんな感じ…!

grid-kiss:
  "+------------------------------+      "
  "|           header ↑           | 120px"
  "+------------------------------+      "
  "                                      "
  "+--150px---+  +----- auto -----+      "
  "| .sidebar |  |      main      | auto "
  "+----------+  +----------------+      "
  "                                      "
  "+------------------------------+      "
  "|              ↓               |      "
  "|         → footer ←           | 60px "
  "+------------------------------+      "

CSSの未来

Audrey SitnikはCSSのこれからについてもブログで書いています。

追加でこちらも気になったものを抜粋してご紹介です。

IEのためのGrid Layout
- もともとグリッドレイアウトという概念が生まれた場所であるMicrosoft、2011年に-ms- のベンダープレフィックスでグリッドレイアウトの仕様があるので、grid layoutをその-ms-を使ってサポートしようという動きです。
- すでに grid-gapやgrid-templateなどグリッドレイアウトでよく使われているプロパティはサポートが進んでいるようですが、まだサポートされていないものもあり、そのあたりのサポートが今後注目されそうです。
Stylelintでベストプラクティスを決める
- 現在新しいディベロッパーが入ってきた時などレビューに時間がかかる現状がありますが、そこのレビューをもっとStylelintで巻き取ろう、という動きのようです。
- FacebookなどはすでにStylelintでカスタムルールを作り、それをチームのベストプラクティスを浸透する手段として取り入れているようです。