cssは先端発展の痛みの一つだろう.以前は裸でcssを書いて、それから後のinline cssまで、それからscss/sassです.単一fileからモジュール化できる本までcssを書く.しかし、フロントエンドの発展に伴い、現在の要求はコンポーネント化であり、従来の直接スクリプトも徐々に痛み点となっている.so,2015/6頃,css-moduleという概念が出てきた.これはcomponentのプログラミングのために生まれたと言える.なぜなら、彼はjsと密接に結びついているからだ.css-moduleは公式という言い方があります.css-moduleは実は元のcssファイルです.ただし、classNameとanimationは最後にobject形式のマッピングオブジェクトにコンパイルされます.簡単な例を挙げると、

//       style.css
.title {
  background-color: red;
}

//   js     
import styles from "./styles.css";

element.innerHTML = 
  `
demo
`;

//        :
# css   
._styles__title_309571057 {
  background-color: red;
}
# HTML   
demo

上で簡単に紹介しましたが、css-moduleはいったい何ですか?Ps:上から少し漏れていますが、どうやってcssをコンパイルしますか.ここでは、方法がたくさんあります.webpack、gulpなどがあります.学生たちの自分の選択を見た.

ネーミング方式

まず、css-moduleの中にあります.以前cssでの命名方式はnonsensenseになった.css-moduleではcamelCaseの形式を使用するすべてのネーミング方法を推奨する.なぜなら、コンポーネントを書くときにグローバルなスタイルを書くのではなく、現在のコンポーネントのレンダリングを完了するために来ただけです.したがって、これらのコンポーネントに必要なcss属性と非表示のcss属性は、display、font、text-alignなど、引っ張らないすべてを書かなければならない.

//     btn    
#    css
.btn-normal{...}

#    css-module
#             btn-style.css
.normal{...}
.clickStyle{...}

組合せcomposition

以上、css-moduleではstyleごとに必要なスタイルをすべて書かなければならないと述べた以上、このような繰り返しの仕事は本当に多すぎます...誰がまだあなたと何をしに来たの?したがって、このような痛みを解決するために、css-moduleはcomposesという概念を提供した.つまり、私たちの以前のcssのネストです.

//    css
#     
.button{...}
.button .normal{...}

//   css-module  
#    composes     
.button{...}
.normal{
    composes:button;
    ...
}

このcomposesの概念はsassの@extendsと似ている.しかし、彼ら2人のコンパイルの結果は少しも似ていない.composesはDOMレンダリング時に直接異なるclassを追加する.@extendsはclassをネストするだけだ.

// @extends   
.Button--common { ... }
.Button--normal {
  @extends .Button--common;
    ...
}

//     
.Button--common, .Button--normal {...}
.Button--normal {...}

しかし、これはcss-moduleの実際のコンパイル後にclassNameのfeatureを変更することに合致せず、@extendsの結果、大きなclassName冗長性をもたらす.具体的にcss-module composesの過程を話します.

//      css-module
.common { ...}
.normal { composes: common; ... }

//       
#   ,            ,  className      .
.components_submit_button__common__abc5436 { ... }
.components_submit_button__normal__def6547 { ... }

//    import   css       :
styles: {
  common: "components_submit_button__common__abc5436",
  normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
}

//      HTML DOM     
#    style.normal   

  Submit

もちろん、composesは他のcssファイルのclassを導入することもできる.

// colors.css
.primary {
  color: #720;
}

// button.css
.normal {
  composes: primary from "../shared/colors.css";
}

また、css-moduleを書くには多くの原則に従うことができます.最も有名なのは単一の職責の原則であるべきだ.

単一の職責

composesの制限のため、私たちは一般的に単一のclassNameを導入して私たちが望んでいるstyleスタイルを包むしかありません.でも、ちょっともったいない感じがします.この点、sassがやったのは素晴らしいと思います.

@mixin subtle-shadow {
  box-shadow: 0 0 4px -2px;
}
//      mixin   
.some_element {
  @include subtle-shadow;
}

したがって、css-moduleで同様の目的を達成するために.私たちは一般的に単一のファイルで小包するしかありません.必要なスタイルの内容です.次のdemoのように:

//           
.element {
  composes: large from "./typography.css";
}

具体例

css-moduleは主にreactと一緒に使用する.reactが存在するため、フロントエンドのコンポーネント化が盛んに発展する.so,ここでは,webpackを用いてimportのcssファイルをコンパイルする必要がある.ここではあまり言わないで、直接配置を出しましょう.

//        
var ExtractTextPlugin = require('extract-text-webpack-plugin');


#         module.exports      
 module: {
 //     .    css-module   .
    loaders: [
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }
    ]
  },

  postcss: [
    require('autoprefixer-core'),
    require('postcss-color-rebeccapurple')
  ],

  resolve: {
    modulesDirectories: ['node_modules', 'components']
  },

  plugins: [
    new ExtractTextPlugin('style.css', { allChunks: true })
  ]

もし、もっと早く知りたいなら、直接オンラインdemoに行ってみましょう.