今年四月份的时候面试了一家公司，
技术面的时候被人家问到了CSS Module有了解过么，我说没有了解过，
他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？
我说给元素和组件加指定前缀，这样就能够保证自己写的类名和其他同事写的类名不会起冲突。
然后就没然后了，，后续又问了我很多React原理啥的面试就过了。
立即学习“前端免费学习笔记（深入）”；
今天我们就把CSS Modules是个啥子东西给他弄明白，这样会更加分。
【推荐教程：CSS视频教程 】
首先我们来看一张图：
一张图理解 CSS Modules 的工作原理：
我们自己编码的时候有俩个文件，一个是ProductList.less文件，一个是ProductList.jsx文件
在构建之后会将less文件转换成蓝色标题的那个文件。
可以由此看出：
button class在构建之后会被重命名为ProductList_button_1FU0u。button是local name，而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字，而不需要关心命名冲突问题。
然后你要做的全部事情就是在 css/less 文件里写 .button {…}，并在组件里通过 styles.button 来引用他。
定义全局CSS
CSS Modules默认是局部作用域的，想要声名一个全局规则，可用:global语法。
比如：
.title {color: red;}:global(.title) {color: green;}
在引用的时候：
// red // green
classnames Package
在一些复杂场景中，一个元素可能对应多个className，而每个className又基于一些条件来决定是否出现。这时，classnames这个库就非常有用。
import classnames from 'classnames';const App = (props) => {const cls = classnames({btn: true,btnLarge: props.type === 'submit',btnSmall: props.type === 'edit',});return ;}
这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：
// btn btnLarge // btn btnSmall
更多编程相关知识，请访问：编程教学！！
以上就是CSS Modules是啥子东西？一起来了解一下！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1617787.html
微信扫一扫 
支付宝扫一扫 
