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

本文共 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

你可能感兴趣的文章
百度、长沙加码自动驾驶,湖南阿波罗智行科技公司成立 ...
查看>>
10 个 Linux 中方便的 Bash 别名
查看>>
[Server] 服务器配置SSH登录邮件通知
查看>>
全新 DOCKER PALS 计划上线,带给您不一样的参会体验! ...
查看>>
Android开发之自定义View(二)
查看>>
python爬虫之微打赏(scrapy版)
查看>>
自制操作系统Antz day08——实现内核 (中) 扩展内核
查看>>
poj-1056-IMMEDIATE DECODABILITY(字典)
查看>>
阿里云容器Kubernetes监控(二) - 使用Grafana展现Pod监控数据
查看>>
区块链应用 | 不知道什么时候起,满世界都在谈区块链的事情
查看>>
小程序爆红 专家:对简单APP是巨大打击
查看>>
FarBox--另类有趣的网站服务【转】
查看>>
在非纯色背景上,叠加背景透明的BUTTON和STATIC_TEXT控件
查看>>
Distributed2:Linked Server Login 添加和删除
查看>>
海量数据处理相关面试问题
查看>>
Python-time
查看>>
Java中取两位小数
查看>>
RTX发送消息提醒实现以及注意事项
查看>>
使用 ftrace 调试 Linux 内核【转】
查看>>
唯一聚集索引上的唯一和非唯一非聚集索引
查看>>