博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS modules 与 React中实践
阅读量:6117 次
发布时间:2019-06-21

本文共 798 字,大约阅读时间需要 2 分钟。

最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的。

目前学到css绑定的问题,看到有一篇好的文章,就转过来了。

CSS 模块化的解决方案有很多,但主要有两类。一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium,  ,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS, :hover 和 :active 伪类处理起来复杂。另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力,API 简洁到几乎零学习成本。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要你使用 Webpack,可以在 Vue/Angular/jQuery 中使用。

是不是应该添加个?,学习零成本。

CSS Modules 模块化方案

CSS Modules 内部通过ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类

:import("path/to/dep.css") {  localAlias: keyFromDep;  /* ... */}:export {  exportedKey: exportedValue;  /* ... */}

但直接使用这两个关键字编程太麻烦,实际项目中很少会直接使用它们,我们需要的是用 JS 来管理 CSS 的能力。结合 Webpack 的 css-loader 后,就可以在 CSS 中定义样式,在 JS 中导入

 

转载于:https://www.cnblogs.com/wanghualiang/p/5339599.html

你可能感兴趣的文章
从0开始学Flutter
查看>>
mysql操作入门基础之对数据库和表的增删改查
查看>>
IIS负载均衡
查看>>
分布式事务,EventBus 解决方案:CAP【中文文档】
查看>>
Linux下的CPU性能瓶颈分析案例
查看>>
spring mvc入门
查看>>
2012在数据库技术会议上的讲话PPT打包
查看>>
【Android】 TextView设置个别字体样式
查看>>
python svn
查看>>
raise语句
查看>>
sequence2(高精度dp)
查看>>
ABP实战--集成Ladp/AD认证
查看>>
存储过程
查看>>
phpcms v9栏目列表调用每一篇文章内容方法
查看>>
python 自定义信号处理器
查看>>
luov之SMTP报错详解
查看>>
软件概要设计做什么,怎么做
查看>>
dwr
查看>>
java的特殊符号
查看>>
word2010中去掉红色波浪线的方法
查看>>