PostCSS。 Sass and Lessの後の未来

アンドレイ・シトニク（イスキン、 邪悪な火星人 ）

2013年、Holowaychukは「RevorkによるモジュラーCSSプリプロセッシング」というタイトルの記事（ http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework ）でReworkプロジェクトを発表しました。



ちょうどそのとき、自動プレフィックスを作成するための何らかのツールを探していました。 この記事を読んだとき、それは本当に革命的なアプローチであり、すべてを変えたので驚きました。 そのため、自動プレフィックスの最初のバージョンはリワークに基づいていました。 しかし、残念ながら、リワーク-それは概念実証であり、一般に機能することを証明した最初の世代でした。 したがって、我々はそれをしっかりと分岐させ、すべての開発者を誘い、小さな革命を起こし、PostCSSを作りました。



PostCSSは、モジュラープロセッサの第2世代です。

それでは、PostCSSとは何ですか？

PostCSSは、非常にシンプルなコアを備えたモジュラープリプロセッサです。 コアは次の2つの要素で構成されています。

1. CSS文字列を入力として受け取り、javascriptオブジェクトのツリーを出力するパーサー。 AST（抽象構文ツリー）。
2. 彼は反対のことをします-彼は入力としてオブジェクトの形で抽象的なツリーを受け取り、出力用の新しいCSSを生成します。 デフォルトでは、PostCSSコアは非常に便利で非常に便利ですが、何もしません。 CSSを解析してから、文字列に戻し、バイトがバイト単位で（空白も含めて）格納されるようにします。

すべての魔法はこれらのプラグインにあります。



プラグインとは何ですか？ プラグインは、ASTを入力として受け取り、そのノードのいくつかを反復処理し、何かを検索し、何かを変更し、何かを追加し、変更されたツリーが戻るようなJavaScript関数です。 次のプラグインは、変更されたツリーに移動します...チェーンになります。 そして最後に-この変更されたツリーを取得して新しい行に保存し、コードカードを生成するソーシングを行うマジックストリングファイア。 新しいものを生成するか、古いものを更新します。



Torvaldsが「コードを見せて」と言ったように、私たちはすべてプログラマーなので、コードは重要です。







どのように見えますか？ PostCSSはNPライブラリであり、NPからロードします。 次に、インスタンスを作成し、プロセッサオブジェクトを作成し、最後のステップにあるプラグインを転送します。 このプロセッサを介してCSSを取得して実行します。 そして、私たちは約束の助けを借りて結果を得ます。



プラグインの例：







プリプロセッサでは、測定単位の親友を作成できません。 PostCSSで書きましょう。 プラグインは、CSSを入力として使用する関数であり、CSS変数に含まれるオブジェクトのツリーです。 さらに、このツリーにはこのような魔法の機能があります。プログラムを簡単にするために、すべてのプロパティのイテレータがあり、内部では再帰的です。 そして、すべてのプロパティを調べて行きます。 ところで、これはES6に注目してください。 すべてのプロパティを反復処理し、プロパティでrem値を探し、ピクセルに置き換えます。 残念ながら、CoffeeScriptがないため、括弧を閉じます。 これは、remのためにこのような基本的な愛好家を作るために書く必要があるすべてのコードです。



違いは何ですか？







誰を倒すか、誰を倒さないかを常に知る必要があります。 どこにプリプロセッサがあり、どこにポストプロセッサがあるのか​​を正確に判断する必要があります。 プリプロセッサはモノリシックで、すべての機能はカーネルに組み込まれ、すべての変数、不純物はすべて内部にあり、構文全体です。 2番目のこと-コードをテンプレートに直接保持し、完全なプログラミング言語を使用します。



PostCSSでは、すべてがプラグインの形式であり、カーネルは何もしません。 2番目のポイント-コードとスタイルは別々にありますが、通常のJavaScriptプログラミング言語のコードとCSS-CSSが別々にあることがわかります。



なぜこれがそんなに重要なのですか？ これらのプラグインは魔法のこと-進化を実装しているからです。







いくつかのクレイジーなアイデアがあなたに来て、あなたの友人はあなたを笑います。 あなたはそれをプラグイン、例えば新しい最適化方法として取り入れて実装し、それを公開します。 残念ながら、彼らは憎しみが嫌いだからあなたを笑い続けますが、少なくとも一部の人々はこれを理解し、それを使い始め、それをチェックします。 彼らは成功し、彼らはより多く雇われ、あなたを笑った人々は解雇されます。 しばらくすると、ほとんどのユーザーがプラグインを使用することがわかりました。 アイデアが美しいからではなく、実際に実際に機能するからです。 そして、人気が出てきたら、W3Cに来て、彼らにドラフトを書くか、他の誰かに仕様を作成するよう依頼することができます。 仕様を実行するために、実際の実用的なアプリケーションがない場合、実践はなく、これが機能するかどうかは誰にもわかりません。 ただし、人気がある場合は、仕様を作成して、新しいサークル、新しい屈辱、新しいプラグインなどに移動します。



それは理論でした。 現代科学は非常に正しいことを言っています-理論は実践なしでは何も意味しません。 アイデアが実際に機能する場合、実際の実用的な結果が得られ、何かが得られます。 PostCSSが機能する場合、プリプロセッサよりも優れているため、生きている何か、触れることができるものがあります。 それがあるかどうかを見てみましょう。







最初のもの。 もちろん、PostCSSには変数があります。難しくはありません。ネストも難しくもありません。アンパサンドを使用すると、誰もが好むので、もちろんBEMには不純物があり、構文はわずかに異なりますが、同じです。 しかし、重要なポイントは何ですか？ これはすべてプラグインの形で行われます。 変数、ネスト、および不純物。 たとえば、変数には2つのプラグインがあり、1つは古き良きSassスタイルを実装し、もう1つはW3C構文であるcssカスタムプロパティを実装します。







2番目の重要な点は、非常に小さいことです。 たとえば、ネストは60行の通常のJavaScriptコードです。 あなたはそれを受け取って修正することができ、私がそれを受け入れることを拒否するなら、あなたはそれを受け取ってフォークすることができます。 これはまったく問題ありません。1日で別のネストを行うことができます。







PostCSSはSassをモジュール式に動作させることではありません。それほどクールではないからです。 モジュール性はモジュール性ではありません、誰が気にしますか？ 主な質問：それ以上のことを行うことは可能ですか？完全に新しい魔法を行うことは可能ですか？ そして、ここでは自動接頭辞が主な例です。 単純なCSSと自動プレフィックス自体を記述するだけです。 彼にはCan I Useデータベースがあり、彼自身がプレフィックスを必要とするプロパティを見つけて追加し、あらゆる種類の複雑な魔法を実行しています。







より興味深いcssnextの例。



Javascriptでは、将来ブラウザにまだないJavascriptを使用できるようになりました。 そして、それを現在のものにコンパイルするコンパイラがあります。 これをすべてCSSで行うのは素晴らしいことです。 たとえば、CSS 4があります。新しいおいしいものがたくさんあります。 たとえば、追加のセレクター、カスタム、個人用のセレクターを宣言して使用できます。 このために、cssnextがあります。



Cssnextはトランスポーターです。 あなたは現在CSS 4を書いており、CSS 3にコンパイルしています。これは、Sassで何ができないかという問題です。 たとえば、カスタムセレクタに加えて、色を操作するための標準化された機能や、あらゆる種類の便利なショートカットが用意されています。 今、あなたは来て追加することができます。



しかし、今は怖い話があります。







中国、巨大な市場、たくさんのお金、すべてのもの、しかし何が起こっているのか-恐怖！ E7、8番目、さらには6番目がまだ人気があります。 これはひどいですが、お金が欲しいです。 そのため、中国企業のアリババはcssgraceプラグインを作成しました。 それはcssnextのようなもので、その反対です。 彼は平均から良いコードを作ってはいませんが、逆に悪いコードを平均から作っています。 CSSを通過し、Eで機能しないプロパティを見つけ、それらをハックに置き換えます。 それは少し不純物に似ていますが、なぜそれがクールで、なぜこれがSassでは不可能であることが重要ですか？ 不純物については、不純物を書き込む必要がある場所を覚えておく必要があるため、不透明度がサポートされていないことに注意する必要があります。 そして、ここであなたはただ書いて、それについて考えません、しかし、中国人、億の中国人はあなたのために考えています。







さらに、プロパティを使用したすべてのマジック、およびセレクタを使用したマジックを実行できます。 ひどいハックがあります。親に4つの要素がある場合、25％幅、5つなら20にしましょう。これは今すぐにできます。 ハッキングは気味が悪いので、手動で記述しませんが、このプラグインまたはPostCSSを使用すると、追加のセレクターが追加されます。







または別のこと。 上記はすべてコードの記述方法に関するものであり、これはサイトの読み込みを高速化するためのコードの作成方法に関するものです。



スプライトはありますが、インライン画像のBij 3エンコードがあり、長所と短所があります。 それらを組み合わせるのは素晴らしいことです。 インラインでCSSが大きくなり、ユーザーがCSSにインラインで画像をアップロードするまでサイトにアクセスすると、何も表示されなくなります。これは悪いことです。 デザインが最初に読み込まれ、次に写真が読み込まれるとクールです。 このために、魔法のデータパッカープラグインがあります。 CSSを通過し、すべての写真をインラインで見つけて、別のファイルに入れます。 したがって、彼は2つのセレクターが同じ画像を使用していることを発見し、これらのセレクターを組み合わせます。



その結果、ユーザーがサイトにアクセスすると、CSSデザインがすぐに読み込まれ、長い間写真付きのCSSが便利になります。 つまり プラグインを1つ追加するだけで、サイトはより高速になります。







興味深い点。 IE9をサポートしているのは誰ですか？ そして、誰が色覚異常のある人を支援しますか？ 問題は、色が見えない人の5％と古いIEユーザーが少ないことです。 そして、維持することは非常に重要です。 そして、あなたはこれが白黒のビジョンではないことを理解する必要があります。 交通信号に関するこれらのジョークはすべて、色覚異常に関するものではありません。 たとえば、健康な人はこれを見て（左側）、色覚異常の人はこれを見て（右側）。 ボタンが目立たないことを確認してください。



これはテストする必要があり、PostCSSの使用は簡単にテストできます。 プラグインがあります。 たとえば、開発中に、通常のビルドを作成し、プラグインを別のビルドに追加します。 このプラグインは、CSSのすべての色を通過し、さまざまな種類の色覚異常のある人が見る色に置き換えます。 もちろん、もっと便利なツールはありますが、もっと便利なツールを使用しないと、あなたに合わないことを理解しています。 しかし、これにより、これらの簡単なツールを使用して、色覚異常のある人のサイトを確認できます。







もう1つの興味深い点があります。PostCSSは、CSSを変更するだけでなく、チェックするためにも使用できます。 たとえば、Twitterはリンター、BEMにPostCSSを使用します。 これは非常にクールなリンターではありません。すでに使用している可能性のあるすべてのリンターと同様に、シンプルだからです。 そして、ここはクールなリンターです-doiuse：







2つのプレフィックスのように動作しますが、定規で指を叩くだけです。 Can I Useデータベースを保存し、CSSを実行します。たとえば、「おい、IEをサポートしたいと言ったが、選択したユーザーはIEでサポートされていないので、それを書いたはずだ」 ？」 これは非常に便利なことです。







これは私のお気に入りのプラグインです。 これはウィキペディアがヘブライ語でどのように見えるかです。 なんで？ ユダヤ人とアラブ人は反対の方法で書くからです。 これは非常に古い手紙です。 しかし、事実は、（未来がなぜそこにあるのか疑問に思ったことはありません-右側に？）未来は右側にあります。 そして、私たちが他の方向に書くなら、私たちの頭の中の未来は左側にあるでしょう。 それで、ユダヤ人とアラブ人のプログレスバーは逆になるはずです。 そして、これはバーの進行だけでなく、一般的に書くことは空間の知覚に影響します。







そして、ISISがあなたを奴隷制に連れて行き、それらにサイトを押し付けるように強制した場合、どうなりますか？ スタイルの2つのバージョンはサポートされません。 1つは西洋の聴衆向け、もう1つはアラブの聴衆向けです。 そして、Jordanの人（彼はISISにいないようです、神に感謝します）は、CSSを実行するプラグインを作成し、左から右、右から左に置き換えます...そして、彼は自分でそのようなものを生成します。 つまり ウィキペディアは通常の入り口であり、ウィキペディアは出口でミラーリングされています。 これは私のお気に入りのプラグインで、Sassでは不可能なことを示しています。







さて、Sass'eでは完全に不可能なプラグインについてだけお話ししました。 実際、非常に多くのさまざまなプラグインがありますが、これらのプラグインは便利な場合がありますが、見た目はあまりよくありません。 githubにアクセスして、すべてのプラグインを見ることができます。多くの興味深いことがあり、あらゆる種類の合成シュガー、最適化、言語拡張、古いブラウザーのサポート、将来のブラウザーのサポートがあります。







非常に難しい質問があります。 PostCSSでできること、Sassでは不可能なことを示しました。 PostCSSはさらに多くのことができます。 これは信じられないほど強力なツールですが、疑問が生じます。より強力なツールはより高速になりますか？ libsassはC最適化で驚くべきことをしたため、非常に高速です。 libsassの結果を上回ることは可能ですか？ そして答えはイエスです。







これは、モジュラーアーキテクチャが非常にクールで重要な理由の代表的な例です。 モジュラーアーキテクチャは最適化が非常に簡単だからです。 多数の小さなモジュールがあります。 このモジュールの速度が低下していることを理解し、最適化してください。 したがって、PostCSSはJavascriptで記述されています-C ++で記述されたlibsassより4倍高速です。 これは、バックエンドが「今すぐCですべてを書きましょう、高速になります」と言ったときに問題になります。



繰り返しますが、PostCSSの利点は何ですか、なぜSassよりも優れているのですか？

1. PostCSSははるかに高速です。 つまり PostCSSを使用したlibsassの速度に満足している場合でも、さらに多くのことができ、さらに複雑な最適化を行うことができます。 これは大きなスペースです。
2. 2つ目はモジュール性です。プロジェクトを取得および分岐できます。さまざまなアイデアを使用できます。
3. そして3番目のことは、PostCSSがSassよりも優れていることです。 SassにあるPostCSSの機能はすべて実行できますが、SassではPostCSSにある機能のほとんどを実行できません。

しかし、私はあなたを欺いた。 レポートのタイトルは、PostCSSはSassの後の未来だと述べています。 実際、それは本物です。 現在、Can I Useで月に50万を超えるダウンロードがあります。 大勢の聴衆。 したがって、制作のやり直しを恐れている場合は、恐れる必要はありません。PostCSSで大勢の視聴者を確認します。 PostCSSは非常に大企業で使用されています。







Paul Irishは、PostCSS Auto PrefixはGoogleによって使用されていると述べました。 oba宝網は中国最大のオンラインストアであり、PostCSS、さまざまなプラグインを使用するだけでなく、それらを作成します。 Wordpressは2つのプラグインを使用します。 Rtl css auto-prefixer-アラビア語バージョン用。 また、TwitterはPostCSSを使用しているだけでなく、ある時点で取り上げられてLessを捨てました。 ポストプロセッサのみを使用します。 このアプローチのみ。







さらに、PostCSSはトレンドになりつつあります。 たとえば、A List Apartは、ポストプロセッサに関する興味深い記事、PostCSSポストプロセッサがCSSプロセッサのダークサイドから私たちを救う方法について書いています（ http://alistapart.com/column/what-will-save-us-from-the-dark-プリプロセッサのサイド ）。







または、たとえば、私たちのキャンプの脱走者である「デザイナーのためのサスとコンパス」の著者であるベン・フラインは、彼がどのようにサスと別れ、PostCSSに切り替えたかについて記事を書きました（ http://benfrain.com/breaking-up-with-sass- postcss ）。







しかし、最もクールなツイートは最後の1つ、Bootsstrapです。 彼らは、CSSnextに非常に触発されており、Bootstrap 5がPostCSS（ https://twitter.com/mdo/status/591364406816079873 ）に載る可能性が高いほど気に入っていると書いています 。 今、彼はLessにいます、そして、彼はSassにいます、そして、彼らはSassを投げて、PostCSSに切り替えます。



つまり 今週の帰宅時に何をしてほしいですか？







最初のポイント：興味深いCSS処理ツールを作成する場合は、PostCSSの使用を検討してください。 RegCSは危険であるため、PostCSSはRegexpよりもはるかに優れています-コードカードを変更するなど もの。



2番目のポイントは、プリプロセッサです。 たとえば、私たちのキャンプの別の脱走者-グリッドの開発者、失われたグリッドの実装のための不純物、MakeevはWeb標準の非常に興味深いtwitterで書いた-彼はポストプロセッサに切り替えました、彼はそれをとても気に入りました、なぜですか？ 以前は3つのバージョンをサポートする必要がありました。1つはスタイラス用、もう1つはレス用、もう1つはSass用です。 とても退屈でした。 そして、彼は気付きました：なぜこれをするのですか？ 彼はそれを自動プレフィックスとして使用します。 彼はPostCSSを取得し、Sassユーザー、Lessユーザーなどが使用できます。







サイトを構築し、ツールを構築し、PostCSSを使用しない場合は、今すぐ自動プレフィックスを追加してください。 これは非常に重要です、なぜですか？ Googleは唯一のプレフィックスツールを推奨しているためです。 これはPostCSSのみであり、他のすべての要素ははるかに悪く、多くの理由があります。







第三のポイント。 たとえば、自動プレフィックス付けなどにすでにPostCSSを使用している場合は、他のプラグインをご覧ください。 cssnextから始めることをお勧めします。これは本当にクールだからです。CSS4で書くことができるからです。 加えて、プラグインのリストを見て、それは楽しいと思われます。







そして4番目のポイント。 新しいプロジェクトを開始する場合、PostCSSがSassの後にうまく機能する可能性があるため、すぐにSassを投げることはお勧めしません。 なぜ捨てるの？ 新しいプロジェクトを開始する場合は、プリプロセッサで変数、ネスト、および不純物を作成する必要がある理由を考えてください。 PostCSSにもこれがあります。自動フィクサーを使用する場合、なぜファイルを2回解析する必要があるのですか？ 変数、ネスト、不純物を自動プレフィックスの前のPostCSSに追加するだけです。



ITはプログラミングに関するものではないため、ITはコードに関するものではありません。 良い方法で、ICQは電報で実行できるからです。 なぜ今ITが登場したのですか？ 私たちは今、私たちが直面している問題を解決できない時代にいるからです。 私たちが解決するすべてのタスクは、頭に収まるよりも複雑です。 これがITの考え方です。 ITは複雑さとの戦いです。 そして、もっと簡単なのは2つのツールですか、それとも1つのツールですか？ 私にとって、これは1つです。

連絡先

» イスキン

ヴコンタクテ

» 邪悪な軍人

このレポートは、 フロントエンド開発者FrontendConfのカンファレンスで行われた最高のスピーチの1つの転写です。 2017年の準備はすでに開始されており、会議のメーリングリストに登録すると、昨年のベストレポートのうち8件が届きます。



今後開催されるHighLoad ++会議の最も難しいセクションは、 フロントエンド パフォーマンスです。 フロントエンドは大きくなりました。すでにアーキテクチャ、モデル、データを備えた本格的なソフトウェアです（以前のように、単なるインターフェイスではありません）。 このセクションで学習するのはこのセクションです。



今後のレポートの一部を次に示します。

• 産業用ウェブサイトの高速化 / Nikolay Matsievsky（Air.rf）;
• あなたのヒーローの画像はあなたを必要とします：HTTP2画像の読み込みで一日を節約 /トビアスバルダウフ（アカマイテクノロジーズ）;
• Accelerated Mobile Pages（AMP）Project：今後の予定は？ / Paul Bakaus（Google）;
  
  Angular 2 / Alexey Okhrimenko（IPONWEB）で制限速度を超えています。
  
  インスタントロード：オフラインファーストプログレッシブWebアプリの構築 / Alex Russell（Google）;