CSS modules and react in practice

Source: Internet
Author: User
Tags css preprocessor

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.