CSS プリプロセッサとポストプロセッサ_html/css_WEB-ITnose

私はフロントエンドを始めたばかりなので、初心者がフロントエンドでマスターする必要がある知識について書かれた本を読みました。は、CSS プリプロセッサとポストプロセッサの検索結果です。1 つは、この知識をみんなと共有すること、そしてもう 1 つは、将来自分自身が読みやすくすることです。ですので、興味のある方は覗いてみてはいかがでしょうか。

CSS プリプロセッサーと言えば、誰もがよく知っているものですが、この記事の焦点は、そこから抽出された CSS ポストプロセッサーを紹介することです。これらは、ここ 1 年ほどのフロントエンド コミュニティの新しいトレンドでもあります。
CSS ポストプロセッサーを抽象化した後、CSS 開発モデルにいくつかの変更を加えます。概念から始めましょう。

CSS プリプロセッサ

大まかに言えば、ターゲット形式が CSS であるプリプロセッサは CSS プリプロセッサですが、この記事では特に、最終的に CSS を生成することを目的としたドメイン固有言語について言及します。
Sass、LESS、Stylus は現在最も主流の CSS プリプロセッサです。

例

以下では LESS を例にします:

LESS

1 2 3 4 5 6 7

.opacity(@不透明度: 100) { 不透明度: @opacity / 100; フィルター: ~"alpha(opacity=@{opacity})" } .sidebar { .opacity(50); } 上記の DSL ソース コード (LESS) を CSS にコンパイルします:

1 2 オーパシティ: 0.5; 実装原理

3 4 .sidebar {

フィルター: alpha(opacity= 50); } ご覧のとおり、コンパイル前とコンパイル後はまったく異なる言語です。

DSLソースコードの解析ツリーを取得します

動的に生成された関連ノードを含む解析ツリーを静的解析ツリーに変換します

1. 静的解析ツリーをCSSの静的解析ツリーに変換します
2. 静的解析ツリーを変換しますCSS の解析ツリー 解析ツリーを CSS コードに変換します
実際の CSS プリプロセッサはもう少し複雑です。これは、ほとんどの関数が独自の DSL とネイティブ CSS の両方をサポートする必要があり、両方の場合で 1 つのことを処理する必要があるためです。

長所と短所

長所: 言語レベルのロジック処理、動的特性、改善されたプロジェクト構造

短所: 特殊な構文、高いフレームワーク結合、高い複雑さ

CSS ポストプロセッサ

CSS ポストプロセスプリプロセッサとは、CSSを処理して最終的にCSSを生成するプリプロセッサのことです。

CSS ポストプロセッサはずっと前から使用されてきましたが、最も典型的な例は CSS 圧縮ツール (clean-css など) ですが、これまで個別に説明されていませんでした。

最近人気の Autoprefixer もあります。これは、Can I Use のブラウザー サポート データに基づいて互換性の問題を自動的に処理します。

例

オートプレフィクサーを例に挙げます:

1 2 表示:

3

4

5

6

.container {

}

. アイテム {

フレックス: 1

}

上記の標準 CSS を、互換性を処理する運用環境 CSS にコンパイルします:

欠点: 論理処理能力が限られている

1 2 3 4 5 6 7 8 9 10 11 12

.container { ディスプレイ: -webkit-box; ディスプレイ: -ms-flexbox; } .ITEM {wwebkit-flex：1;コンパイル前のコードとコンパイル後のコードは両方とも CSS です。 Sublime Text を使用している場合は、Package Control を通じて Autoprefixer プラグインをインストールして体験できます。 実装原理 ソースコードをCSSとして解析し、分析ツリーを取得する CSS分析ツリーの後処理 CSS分析ツリーをCSSコードに変換する メリットとデメリット メリット: CSS構文を使用するモジュール化が容易で、CSS の将来の標準に近い

開発モデルの変更

元の開発モデルは次のようなものです:

DSL 源代码 -> 生产环境 CSS

オリジナルと比較すると、新しい開発モデルは最大の変更点は標準 CSS プログラミングであり、互換性と最適化の部分は CSS ポストプロセッサーに任せて自動的に完了します。標準 CSS プログラミング モード:

DSL 源代码 -> 标准 CSS -> 生产环境 CSS

以下はいくつかの簡単な比較です:
2. 比較項目 プリプロセッサとポストプロセッサは同時に使用されます
言語学習コスト

DSL

CSS √

DSL

目標出力結果

本番環境CSS

標準CSS √

標準CSS √

互換処理結合度プログラマビリティ

ここでは、CSS プリプロセッサと CSS ポストプロセッサを同時に使用し、それぞれが最適な機能を実行することをお勧めします。

私は魔法の杖ですが、将来的には次のような傾向になると予測しています:

単一の機能に焦点を当てた小規模な CSS ツール ライブラリがますます増加

CSS スタイル ライブラリが全体的なソリューションからモジュールの組み合わせに変換ソリューション

CSS 標準の将来の一部が CSS プリプロセッサでサポートされています

ネイティブ CSS と CSS ポストプロセッサの組み合わせが新たな選択肢になります

優れた CSS ポストプロセッサ フレームワーク

リワーク

リワークは効率的で、シンプルで、拡張が簡単ですモジュール式 CSS プリプロセッサー。
最初のバージョンは 2012 年 9 月にリリースされました。それは、Stylus の作者である TJ Holowaychuk によって掘られた新しい穴でした。

実際、彼は CSS ポストプロセッサのモデルを使用しており、その上に Stylus スタイルのインデントとネストを模倣するツール styl があり、その CSS プリプロセッサ機能の一部は、Rework が動作を開始する前に css-whitespace を渡すことです。気がついた。
Rework に基づいたスタイル ライブラリがいくつかあります。これらは、CSS 標準ドラフトまたは CSS 標準提案を参照します。これは、rework-vars、rework-font-variant、rework-calc、rework- など、CSS の将来の標準をサポートするのと同等です。色彩関数など。

少しめまいがするように聞こえますか？これは、実際のニーズに応じて Myth などの CSS フレームワークを組み合わせることができることを示しています。

Rework の特徴をまとめると:

CSS 解析オブジェクトを JavaScript で直接操作でき、拡張が容易

必要に応じてモジュールを自由に組み合わせて CSS ツール ライブラリをカスタマイズできる

CSS ポストプロセッサのモデルがモジュールの傾向を決定するCSS の将来の標準

サーバーサイドに加えて、ブラウザ環境での実行もサポートします

リワークはまだ非常に新しく、蓄積するにはさらに時間が必要です。

PostCSS

PostCSS は、JavaScript を通じて CSS を変更できるようにする CSS ポストプロセッサ フレームワークです。
最初のバージョンは 2013 年 11 月にリリースされ、Autoprefixer プロジェクトから抽象化されたフレームワークです。

PostCSS には次の機能があります:

Rework に非常に似ていますが、より高度な API を提供し、拡張が容易です

既存のソース マップに基づいて新しいソース マップを生成できます

オリジナルの CSS 形式で保持力が向上し、エディター プラグインの開発が容易になります

Rework よりも歴史が浅く、Autoprefixer の成功例は 1 つだけです

実際、Autoprefixer は元々 Rework に基づいていましたが、後に作成者により多くのニーズ (上記のリスト) があったため、作成されましたPostCSS ホイール。

最後に

CSS ポストプロセッサーの出現により、CSS ワークフローはより明確になりましたが、現在ではまだ成熟には程遠く、改善できる点はまだたくさんあります。

たとえば、Autoprefixer は構文プレフィックス レベルの互換性のみを提供し、IE フィルターの互換性などの問題に特に対処するいくつかの小さなモジュールも必要とします。
たとえば、CSS で単独で使用される画像の CSS スプライトを自動的に分類して結合できます。
たとえば、プロジェクト内のアイコン フォント グリフの実際の使用状況に基づいて、フォント サイズを自動的に最適化できます。

各モジュールが特定の問題に焦点を当てている場合、ほとんどの場合、大規模で包括的な一元化されたフレームワークよりも信頼性が高くなります。

趣味で Rework または PostCSS に基づいた CSS ポストプロセッサを作成することも検討してみてはいかがでしょうか?

高、DSLフレームワークに依存	低、ポストプロセッサに依存	低、ポストプロセッサに依存√
高度な言語レベルのロジック処理√	中程度の拡張CSS構文	高度な言語レベルのロジック処理√