1. ホーム
  2. CSS
  3. PostCSSから5年、CSSの今とこれから

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

目次

  1. はじめに
  2. postCSSとは
  3. CSSの今
  4. CSSの未来
  5. まとめ

はじめに

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

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

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

Artboard Copy 92.png (188.7 kB)

PostCSSとは

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 の間は1カラムに、 400-900pxの間は3カラムに、900px~は6カラムになります。

CSSの今

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

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

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

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

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

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担っています。
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-gapgrid-templateなどグリッドレイアウトでよく使われているプロパティはサポートが進んでいるようですが、まだサポートされていないものもあり、そのあたりのサポートが今後注目されそうです。
  • Stylelintでベストプラクティスを決める
    • 現在新しいディベロッパーが入ってきた時などレビューに時間がかかる現状がありますが、そこのレビューをもっとStylelintで巻き取ろう、という動きのようです。
    • FacebookなどはすでにStylelintでカスタムルールを作り、それをチームのベストプラクティスを浸透する手段として取り入れているようです。

まとめ

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

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

この記事は
参考になりましたか?

PAGE TOP