[フロントエンド] CSSの知識-css関連エンジニアリング・プログラム

1.どのようにCSSのモジュラーの問題を解決するには？

などの使用が少ない、サスCSSプリプロセッサ、
使用PostCSSプラグ（postcssインポート/ precss）
WebPACKのプロセスCSSを使用した（CSS-ローダー+スタイルローダー）

何2.PostCSSこと？

PostCSSは、プラットフォーム固有のは、このプラットフォームは、プラグインを何ができるかに依存しています
一般的なプラグインを以下のように

        //  1. 可以添加属性前缀，适应所有的浏览器
        const autoprefixer = require('autoprefixer');
        // 2. 将所有的import 导入进来的模块全部合并为一个文件
         const atImport = require('postcss-import');
        // 3.  实现代码的压缩优化
         const cssnano = require('postcss-cssnano');
        // 4. cssnext提前使用CSS的高级语法
         const cssnext = require('postcss-cssnext');
        // 5. precss 类似于sass的语法处理
         const precss = require('precss')

マージモジュール（予め組み合わせ別個のモジュール）を達成3.import
4.CSS構文チェック、互換性チェック
5.アーカイブ

何3.CSSモジュールいますか？どのように使用するには？

問題解決のためのクラス名の競合
コンパイルに使用PostCSSまたはWebPACKのと他のビルドツール
HTMLテンプレート生成されたクラス名（オブジェクト。クラス名を取得する方法）でビルドプロセスを使用します

4.なぜ基準負荷CSSにJSを使うのか？

JSのエントリとして、資源の管理は自然な利点を持っている（HTMLは、CSS自体がモジュールとリソースを管理することができません）
成分の結果、スタイル、一緒にパッケージの挙動、補強成分ポリ（コード結合を減少させます）
より多くの処理を行うことができます（WebPACKの、使用CSSモジュールは、名前の競合を解決）

原則5. PostCSSは何かを言いますか？

[！NOTE]
PostCSSは、それ自体は新しいCSS言語プラグイン変換ツールJSスタイルシートによるものですが、プラットフォームや生態心理、プラグイン、すなわちJS APIの拡張サービスを提供し、開発者は、これらのインタフェースを使用することができます、カスタム開発、プラグインで
現在人気のプラグインのようなツール：Autoprefixer、Stylelint、CSSnano。

5.1分析ステップ

CSSは、抽象構文木（ASTツリー）に解析され
ASTツリーは、処理プラグインの任意の数に「渡します」
ASTは、ツリーの文字列に再処理され、

5.2処理機構

Stringifier→トークナイザ→パーサ→AST→プロセッサ→ソース文字列

5.2.1トークナイザ

[！NOTE]
ソース単語列のCSS

例えば：
.className {色：#FFF;}
トークナイザによって結果は次の通りであります：

[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

単語の種類、例えば、以下のパラメータ：

const token = [
     // token 的类型，如word、space、comment
    'word',
 
    // 匹配到的词名称
    '.className',
 
    // 代表该词开始位置的row以及column，但像 type为`space`的属性没有该值
    1, 1,
 
    // 代表该词结束位置的row以及column，
    1, 10
]

5.2.2パーサ

[！NOTE]
トークナイザした後、結果がパーサーのASTを初期化する必要が

this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

5.2.3プロセッサ

AST後、PostCSS JS APIは、使用するプラグインの数を提供します

5.2.4 Stringifier

プラグイン、ブラウザアドインプレフィックスとして、処理した後、再Stringifier.stringify一般CSSであろう。

フロントエンドのご理解約6トークが設計しますか？

参考ブログ：