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

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay1です！

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

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

PostCSSとは

PostCSSとは

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

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

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

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

PostCSSの定番プラグイン

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

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

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

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

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

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

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

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

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

.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は今フロントエンドツールでもっとも人気のツールの１つ

(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でカスタムルールを作り、それをチームのベストプラクティスを浸透する手段として取り入れているようです。

まとめ

以上、今回はPostCSSから5年たった今、簡単にCSSの今とこれからについて気になったところを抜粋してご紹介しました。

個人的には、PostCSSはlost など便利なプラグインがあるのはもちろん、Stylelintでベストプラクティスを決めるられたら良いな…など思ってます。