初心者のためのCSSポストプロセッサ

CSSの前処理 これは、ほとんどのWeb開発者がすでに学んだ、または読んだことのある概念です。開発者がこの普及しているテクノロジを理解できるように、CSSの前処理について詳しく説明しました。しかし、どうですか ポストプロセッサ?

これらの比較的新しいツールは、次の点で似ています。 Web開発ワークフローに影響を与える, しかしそれらは作動します CSS開発の反対側 （“役職” 開発）.

この記事では、私が紹介したいのですが 後処理の基本, それがどのように動作するのか、なぜあなたがそれを使うのか、そして後処理でCSSゲームを立ち上げるために使えるいくつかのライブラリ/ツールを共有する.

後処理と前処理

の 前処理革命 ときに起こった Sass / LESSが大ヒット. これらのツールを使用すると、開発者はCSS内で変数、ループ、関数、およびミックスインを使用できます。これはほとんど基本的なCSSの開発になります プログラミング言語に似ています 拡張機能付き.

後処理 プレーンなCSSをすでに作成した後に発生します。 さらに拡張する 自動化を通じて。これは含めることができます クラスセレクタの拡張, または 自動追加プレフィックス 特定のCSSプロパティについて.

一般的に言えば、前処理には 独自のスタイルシート言語, SassやLESSなど、 純粋なCSSに変換する. 後処理はその基本的なCSSを取ります、そして 自動化/繰り返しを適用します.

これは上の画像の出典でもある記事からの引用です。作者だと思う ステファンバウムガルトナー 違いを見事に合計します.

ある意味では、どちらも自動化ツールのように見え、さまざまな方法で機能しています。たとえば、後処理によって解決される一般的な問題は次のとおりです。 新しいCSS3プロパティのプレフィックスの自動追加.

しかしこれはSassの拡張でも可能です。. 本当に違いはありますか? これは同じ投稿からのもう一つの素晴らしい引用です。

これは理論的な意味では当てはまるかもしれませんが、Web開発コミュニティは依然としてこれらのツール間の格差を生み出しています。このため、少なくともポストプロセッサについて読み、それらが何をすることができるかを知るように開発者にフロントエンドすることを強くお勧めします。.

ワークフローに後処理を取り入れる

ほぼ全員が参照 PostCSS 後処理の決定的なリソースとして。しかし、PostCSSチームはTwitterに対して以下のことを公然と認めています。 タイトルを変更する 言葉遣いはもはや意味をなさないので.

PostCSSは、もはやCSS以前のツールでもCSS後のツールでもありません。それは実際にできます 両方の分野で働く! これはさらに、すべてのCSSツールが1つのものにまとめられているという以前の発言からの引用を説明しています。 - 処理.

PostCSSはJavaScriptプラグインを使って CSSワークフローを自動化する, そしてPostCSSライブラリを拡張するためにあなた自身のJSプラグインを書くことさえできます。もしあなたがPostCSSを始めたいのなら、Smashing Magazineのこのイントロチュートリアルをチェックしてください。 Sassをすでに使用して理解している場合は、すぐにPost CSSを使用できます。.

独自のCSSの前後処理ワークフローを構築するには、まず始めに あなたの苦痛点のリストを作る, といった：

CSSグラデーションの自動プレフィックス
CSSルールの自動編成
特定のプロパティにポリフィルを追加する
背景画像の画像寸法を生成する

これらのことはすべて実行できることに注意してください。 前処理と後処理の両方で. 重要なのは、CSSの前後処理が急速に融合して 同じもの.

目標をさまざまな処理段階に分割するのではなく、 目的としてそれらをリストしなさい, その後に進みます 適切なツールを探す.

最高の後処理ツール

SassとPostCSSにはたくさんの選択肢があるので、私はこのセクションで拡張について言及することを避けるようにしました。正直にあなたができる これらのライブラリだけで済む, しかし私はまた提供したいと思います より具体的なソリューションの代替案.

よろしく

もしあなたが既にNode.jsを使っているのなら、Pleeeaseは明白な選択のようです。それはたくさんあります 典型的なCSS処理機能, ファイルのインポート、変数/関数、自動縮小、SVGのような新しい要素の代替サポートなど.

ウェブサイトにもあります インタラクティブな遊び場 ローカルでコピーをダウンロードせずにオンラインでライブラリを試したい人のために.

祝福する

Internet Explorer 6がまだ厄介な時期だったことを私は覚えています、そしてそれはIE開発が進歩したことを知っているのはうれしいです - しかしそれほどではないIEの使用は基本的になくなったと言いたいのですが、これは本当ではないようです.

ありがたいことに、Bless CSSはその解決策です。 潜在的なIE関連の問題を検出します あなたのCSSで、そして後処理で解決策を作ります。 Node.js上で動作するため、典型的なNPM / Gulpのワークフローにうまく適合します。.

CSS次へ

これがあなたを可能にする本当にクールなライブラリです。 より高度な機能でCSSを構築する 現在はサポートされていません。 CSSNextライブラリには 奇妙なCSS4機能のサポート, といった グレー（）, それは現在W3Cドラフトにのみ存在します.

すべての開発者がこのライブラリを必要とするとは思わない。それは非常に具体的であり、そして日々の問題を解決することはありません、しかしそれはあなたに 今後のCSS4仕様の味 現代のCSS3に構文を変換しながら.

Stylecow

もし ブラウザサポート それはあなたにとって問題です、それでStylecowは必要不可欠です。この強力なライブラリはCSSを開発することを可能にします お気に入りのブラウザだけに. それから、Nodeを通してコマンドラインツールを実行することができます、そしてあなたのCSSは サポートしたいすべてのブラウザ用に更新.

あなたはGitHubからStylecowをダウンロードすることができます、そしてそれはいくつかの非常に詳細なドキュメンテーションが付属しています.

`-接頭辞なし`

最後に私は共有したい -接頭辞なし それはあなたがすることができますようにそれはまたCSS開発のための最愛のツールです 接頭辞のないCSSプロパティを使う. 誰もがアニメーションやグラデーションなどの最新のCSSプロパティを使用したいのですが、冗長コードを手動でコピー/貼り付けしたいと思う人はいません。.

このプラグインを使えば、あなたのコンピュータ上のポストプロセッサを通してあなたのCSSを実行する必要すらありません。ユーザーのコンピュータ上で動作するブラウザインクルードとしても機能します。 CSSファイルを自動的に更新する.

PostCSSライブラリの一部であるAutoprefixerは、おそらくもっと良い選択です。 ローカル後処理. そのため、LESSまたはSassをPostCSSと一緒に使用すれば、印象的なCSS開発ワークフローに必要なものがすべて揃うことになります。.

まとめ

後処理は、実際のテクノロジよりもキャッチフレーズのようなものですが、CSSワークフローではその役割を果たします。 現代のCSSを書くプロセス全体がこれらのツールによって劇的に強化されました. 私は開発者が彼らにとって最適なものを見つけるためにもっと深く掘り下げることをお勧めできます.

後処理に関するさらに詳しい情報をお探しの場合は、以下の関連記事をご覧ください。

CSSプリプロセッサの暗い面から私たちを救うもの?
PostCSSとcssnextを使って将来のCSSを書くための考察
CSSの前処理（SASSまたはLESS）とCSSの後処理