2018年12月1日

デザイン

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でベストプラクティスを決めるられたら良いな…など思ってます。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP