モジュラーCSSで

I.はじめに

  • モジュラーフロントエンドWeb:HTMLモジュラー、CSSやJSモジュラーモジュラー三つの部分。

二、CSSモジュラー背景

  • それ以外の場合は取り返しのつかない結果が発生し、小規模なプロジェクトでは、それはまだCSSの膨大な量ではない、問題は顕著ではないですが、あなたはより多くの開発や大規模プロジェクトの継続的なメンテナンスをしたい場合は、管理し、CSSを調整する必要があります(誰がそれを怖がら??)。
  • .dossierList- ヘッド{ 
        幅:94
        高さ:8
        マージン -left:3
        余白の右回転:3
        表示:フレックス。
        正当化 -content:省スペースの間; 
        整列 - 商品:中心
    } 
    .dossierList - ヘッド.head_left { 
      幅:100%と; 
      高さ:100; 
      表示:フレックス。
      整列 - アイテム:センター; 
    }
    .dossierList- ヘッド.head_left .logo { 
      幅:43px; 
      高さ:は50px; 
      パディング - 右:5pxの; 
    } 
    .dossierList - ヘッド.head_left H1 { 
      フォント - 重量:太字; 
      フォント - ストレッチ:ノーマル; 
      手紙 - 間隔:2ピクセル。
      背景 -image:直鎖勾配(値は0deg、
        6cffff#33
        b6ffff#45
        #FFFFFF 100)。
      -webkit-バックグラウンドクリップ:テキスト。
      -webkit-テキスト-fill- 色:透明;
      フォント -size:1 .875rem。
      表示:フレックス。
      整列 - アイテム:センター; 
    }
    コードの表示

    これは、以前のCSSスタイルであることがわかりますが、このようなアプローチ問題があります

    • セレクタ面倒、長い、面倒な書き込み;(彼らは、ネストされたサポートしていないため)
    • 階層構造が明確ではないが、私は父と息子や兄弟関係との関係を知りません
    • 維持することは非常に困難で、
    • コードの再利用が困難である(時々命名汚染が存在することになるので)

三、CSSコードの仕様

  • 網易は、一般的にNECを使用します

IV。

第五に、

おすすめ

転載: www.cnblogs.com/wxh0929/p/11401221.html