CSS modules and react in practice

Recently has been learning react, it seems quite simple content, in fact, the learning curve is still relatively high.

Now learn the CSS binding problem, see a good article, turned around.

CSS has a number of modular solutions, but there are two main categories. One is to completely discard the CSS, using JS or JSON to write the style. Radium, Jsxstyle, React-style belong to this category. The advantage is that it can provide the CSS with the same powerful modularity ability, the disadvantage is that it can't take advantage of the mature CSS preprocessor (or post processor) Sass/less/postcss, :hover and :active pseudo-class processing complex. Another kind is still using CSS, but using JS to manage style dependency, is the CSS Modules. CSS Modules can maximize the integration of the existing CSS ecosystem and JS modularity capabilities, the API concise to almost zero learning costs. A separate JS and CSS are still compiled at the time of publishing. It does not depend on React, as long as you use Webpack, you can use it in vue/angular/jquery.

Should you add a??, study 0 cost.

CSS Modules Modular Scheme

CSS Modules internally through ICSS to solve the two problems of style import and export. Corresponding :import and :export two new pseudo-classes respectively

: Import ("path/to/dep.css") {  localalias:keyfromdep;   /*  */}:export {  exportedkey:exportedvalue  ; /* */}

But the direct use of these two keyword programming is too cumbersome, the actual project will rarely use them directly, we need to use JS to manage the ability of CSS. When combined with Webpack css-loader , you can define styles in CSS and import them in JS.

CSS modules and react in practice