理解CSS Modules
2017-07-10 23:32
92 查看
CSS Modules
前言
今天被批了,心情很是郁闷,转念想确实是自己的问题,一天的工作确实没有多少实际产出,老是想着该学的学会了就会好的。公司毕竟不是学校,不会给你太多学习的时间,我们的职责终归是为公司产生效益,基本的任务完成不好,整天想着学习是不切实际的,所以在此谨记,工作是工作,学习是学习,在公司先完成工作,这是个人能力的体现。郁闷归郁闷,博客还是要写的。传统的CSS弊端
前端一直在说模块化模块化,React的组件不知道是不是遵循了模块化的原则,CSS Modules也是CSS模块化一种方案,结合实际开发,我们往往会碰到下面这些情况:/* components/submit-button.css */ .Button { /* all styles for Normal */ } .Button--disabled { /* overrides for Disabled */ } .Button--error { /* overrides for Error */ } .Button--in-progress { /* overrides for In Progress */
<button class="Button Button--in-progress">Processing...</button>
上面是css的正常打开方式,我们来分析一下它的弊端:
1.命名混乱:.Button是普通的按钮的样式,其他三个是在此基础上的样式叠加,如果我想要增加一种新的按钮,命名也是像上面一样,等到程序复杂了,或者说多个人一起开发,为了区分,可能类的名字就会很长,首先命名混乱,不易阅读,其次影响项目的压缩。。。
2.依赖管理不好:这个我一直不是理解的很彻底,我现在的想法,以上面威为例,button的组件有一个css,一个页面有多个组件,那么html里面是不是有多个诸如这种
<link src=''>的引入语句,就会显得很乱,是不是?
3.全局污染:这个在上面的代码里没法体现,等到项目大了,多人协作后引入好几个css文件,比如别人一个ul的样式可能把你写的东西搞得完全认不出来,到时你就知道模块化有多爽了。
4.无法共享变量:为啥这么说呢?比如有一些样式是很多组件都需要的,如果是普通css,就只能老实地复制粘贴(是不是这样?我css还不是很精通),但是CSS Modules就有一个composes可以得瑟,下面会讲。
所以说传统的css还是会存在很多不好的地方,所以我们就要看看CSS是怎么解决这些问题的。
CSS Modules的解决方案
先看一下同样的例子,CSS Modules的写法:/* components/submit-button.css */ .normal { /* all styles for Normal */ } .disabled { /* all styles for Disabled */ } .error { /* all styles for Error */ } .inProgress { /* all styles for In Progress */
/* components/submit-button.js */ import styles from './submit-button.css'; buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
乍一看,?,要写的东西变多了。。。,每个组件样式都要全部重新写,都不能覆盖,什么玩意儿?别急,慢慢分析。
首先,命名不会混乱了,因为不需要叠加式的起名字了,引入的css的语句会让最终的html自己加上前缀和后面唯一的序列码,我们只需要简单的命名,绝对不会混!压缩自然也小一些。
每个组件有自己对应的样式,即使import后在同一个js文件中也不会冲突,看上面的
<button>,它的class只有submit-button里的样式。
依赖管理方面哈哈,反正就是感觉这样很好管理啊,你自己体会。
最让人诟病的样式重新写,其实人家早就想好了,就是
composes。
<button class="components_submit_button__normal__abc5436"> Processing... </button>
composes
.common { /* all the common styles you want */ } .normal { composes: common; /* anything that only applies to Normal */ } .disabled { composes: common; /* anything that only applies to Disabled */ } .error { composes: common; /* anything that only applies to Error */ } .inProgress { composes: common; /* anything that only applies to In Progress */ }
具体就是这么用的,应该很容易就能发现用法。当然在SASS里面我们可以用@extend实现相同的效果。
其他css文件中的样式也可以拿来复用:
/* colors.css */ .primary { color: #720; } .secondary { color: #777; } /* other helper classes... */
/* submit-button.css */ .common { /* font-sizes, padding, border-radius */ } .normal { composes: common; composes: primary from "../shared/colors.css"; }
其实本文也只是在CSS Modules是什么,有什么用上做了一些学习,具体如何才能使用,要注意一些什么规范,在实际工程中的应用这些都没有细讲。CSS Modules结合React,Webpack灵活运用,这是一段很长的路,不是靠这一点理解就行,希望以后有机会还能写一篇关于CSS Modules方面更深的探讨,共勉!
本篇文章实例摘自CSS Modules
相关文章推荐
- Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
- Sql Server:理解uniqueidentifier类型和NEWID()
- Caching Application Block 深入理解
- 对数据及数据库的理解
- 对Gabor在图像中应用的几点理解~!
- java 深入理解 网络编程
- 理解WebKit和Chromium: WebKit和Blink
- javascript深入理解js闭包
- 理解Xen的network-bridge模式
- MFC---理解Windows消息循环机制
- solr中facet及facet.pivot理解(整合两篇文章保留参考)
- 深入理解拉格朗日乘子法(Lagrange Multiplier) 和KKT条件
- 深入理解Android卷III 第8章 深入理解Android壁纸 (节选)
- 深入理解Java对象序列化
- 反向代理的理解
- 33、深入理解Java的接口和抽象类
- KMP算法理解
- Unity3D对象池的理解与小例子
- System类的个人理解
- 游戏引擎概念理解