网络科技

    今日:501| 主题:244642
收藏本版
互联网、科技极客的综合动态。

[其他] 理解CSS模块化

[复制链接]
慌乱了年华 发表于 2016-10-4 00:40:09
80 6

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。
  把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中,    Sass应该是最为著名的一个。此外,还有    PostCSS,和Sass略有不同,但是殊途同归——用浏览器不能解析的语法编写,最终编译成浏览器能够理解的语法。  
  现在,又有一位新的成员出现了,它就是    CSS模块。在本文中,我就将介绍这种技术,告诉CSS模块化的诸多优点,以及如何编写模块化的CSS。  
  什么是CSS模块

  首先,让我们从官方文档入手:
  A    CSS Moduleis a CSS file in which all class names and animation names are scoped locally by default.    CSS模块就是所有的类名都只有局部作用域的CSS文件。  
  事实稍微有一些复杂。由于类名是    默认具有局部作用域的,这就涉及到一些初始设置,一个编译过程,以及其他一些难以琢磨的东西。  
  但是最终,我们会为CSS模块化带来的好处而开心:CCS模块将作用域限制在组件中,从而避免了全局作用域的问题。我们再也不用操心为组件寻找一个好的命名了,因为编译过程已经帮你完成了这个任务。
  它是如何工作的

  CSS模块需要在构建步骤管道化,这也就是说,它们不是自动驱动的。它可以看成是    webpack或    Browserify的一个插件。它的基本工作方式是:当你在一个JavaScript模块中导入一个CSS文件时(例如,在一个    React组件中),CSS模块将会定义一个对象,将文件中类的名字动态的映射到JavaScript作用域中可以使用的类名。举个具体的例子:  
  如下是一个简单的CSS文件。其中,    .base类名不需要是工程中唯一的,因为它将不会是真正被解析的类名。它可以看成是在JavaScript模块中使用的类在样式表中的别名。  
  1. .base {
  2.   color: deeppink;
  3.   max-width: 42em;
  4.   margin: 0 auto;
  5. }
复制代码
下面是该CSS类在JavaScript组件中的使用方式:
  1. import styles from './styles.css';
  2. element.innerHTML = `<div class="${styles.base}">
  3.   CSS Modules are fun.
  4. </div>`;
复制代码
最终,它将生成下面这个东西(当使用webpack的默认步骤时):
  1. <div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>`
复制代码
  1. ._20WEds96_Ee1ra54-24ePy {
  2.   color: deeppink;
  3.   max-width: 42em;
  4.   margin: 0 auto;
  5. }
复制代码
当然,生成的类名可以通过配置,使得它的长度更短,或者遵循一些特定的模式。当然了,这些最终都不重要(虽然短的类名意味着更短的样式表),重点在于这些类名是动态生成的、唯一的且和正确的样式表一一对应。
  一些需要注意的地方

  这就是CSS模块工作的方式了。这时,你可能会想,“这到底是个什么玩意儿,我甚至。。。”。OK,停下!我知道你想说什么。现在就让我一一解答一些你可能有的疑虑。
  这看起来太丑了

  确实如此。但是类名并要求一定要长的好看对不对,只要可以将样式正确的应用于元素就可以了嘛。而CSS模块化方法完成的非常好,所以我觉得,这不是一个问题。
  这非常难debug啊

  由于需要有一个编译的步骤,所以直接debug是非常困难的。比如Sass直接debug也是相当不容易的,所以我们才有了    sourcemaps。对于CSS模块,我们也可以设置sourcemap。  
  其实,我还想说的是,虽然在模块中,类的名字是自动生成而不可预知的,但是对于模块来说,它比样式表还是更容易debug的。只要你知道现在在开发者工具中查看的样式属于哪个模块,其实在相应的样式中也是很容易找到的。
  这使得样式不容易复用啦!

  这句话既对也不对。一方面来说,却是如此。但这是因为模块将CSS样式和组件相绑定,从而不会发生全局样式的冲突。这其实是一件好事,我相信你也会同意的对不对。
  另一方面,要定义全局样式也是可以的,只要使用    :global()就好了。比如,作者需要保留的全局辅助样式。  
  1. :global(.clearfix::after) {
  2.   content: '';
  3.   clear: both;
  4.   display: table;
  5. }
复制代码
CSS模块还可以从其他模块中继承样式,这和Sass中的    @extend方法其实是一样的。它不会拷贝样式,只是将选择器连接到继承的样式中。  
  1. .base {
  2.   composes: appearance from '../AnoherModule/styles.css';
  3. }
复制代码
它需要webpack,Browserify或者其他工具!

  这和Sass需要将    .scss文件编译成CSS文件,PostCSS需要将样式表处理成浏览器能够识别的样式其实是一样的。无论如何,都需要一个构建步骤。  
  我们究竟为什么要讨论这个东西?

  其实,我甚至不确定CSS模块在未来到底会不会像它们现在这样存在,不过,我确定这是一种正确的编写样式的方式。在拆分成许多细小组件的庞大站点中,拥有一个臃肿的全局样式表,这肯定是不合适的。
  CSS统一的名空间使得它既强大又脆弱。而CSS模块化或者未来基于这个思想的其他工具可以在保留样式复用的优点的同时,避免命名冲突,这是一个双赢的选择。
  入门

  如前面所说的,你需要有webpack或者Browserify来实现CSS模块化。
  Webpack

  先从webpack版本的模块化开始。在    webpack.config.js中,加上如下配置,使得webpack将CSS文件作为CSS模块看待:  
  1. {
  2.   test: /\.css$/,
  3.   loader: 'style-loader!css-loader?modules'
  4. }
复制代码
这时,它将把样式注入到页面中的``元素中。这可能不是我们想要的,使用    extract text plugin for webpack,我们可以很方便的抽取出样式表:  
  1. {
  2.   test: /\.css$/,
  3.   loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')
  4. }
复制代码
对于webpack,要讲的就是这么多了。
  Browserify

  我只在命令行中用过Browserify,所以我猜使用起来会更复杂一些。在    package.json文件中,加入    npm script:  
  1. {
  2.   "scripts": {
  3.     "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  4.   }
  5. }
复制代码
这条命令告诉Browserify运行    src/index.js,返回    dist/index.js,并且使用    css-modulesify将样式表编译至    dist/main.css。如果你想再加上    Autoprefixer,那么命令可以写成这样:  
  1. {
  2.   "scripts": {
  3.     "build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"
  4.   }
  5. }
复制代码
如你所见,使用    --after选项可以在编译完成样式表时候,继续对它进行处理。  
  ### 阅读更多
  
       
  •       Setting up a Living Styleguide in Jekyll   
  •       JavaScript Functional Testing with Nightwatch.js   
  •       SitePoint's Tiles: A Case Study in Components, Theming and Flexbox  
  总结

  从今天看来,    CSS模块化系统和生态确实有些原始了,从Browserify中的配置就能看出来。不过,我确信CSS模块化将变得更好,并且越来越多的人将意识到不管对小项目还是大项目来说,这都是一个很好的方法。  
  我认为CSS模块化背后的思想是正确的。当然,我不是说这个库就是最佳解决方案,但是,它确实包含了一些CSS应该采用的写法:模块化、作用域隔离、同时支持复用。
  最后,我向大家推荐项目作者Glen Maddern的文章    this introduction to CSS Modules。
友荐云推荐




上一篇:讲讲你不知道的 ARC (一)
下一篇:How To Optimize Your Customer Acquisition Funnel The Right Way
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

wfjwq1314 发表于 2016-10-4 01:40:39
视死如归的架势啊!
回复 支持 反对

使用道具 举报

侯佳晓颖 发表于 2016-10-4 01:59:07
好贴大家分享!感谢ING
回复 支持 反对

使用道具 举报

董佳昕 发表于 2016-10-4 02:38:14
抢位子,坐等更新!
回复 支持 反对

使用道具 举报

liyanglawyer 发表于 2016-10-5 01:52:25
大家不要急,排队来顶贴!
回复 支持 反对

使用道具 举报

ぁ詠遠∝僾妳 发表于 2016-10-5 01:53:41
抢位子,坐等更新!
回复 支持 反对

使用道具 举报

zszsx110 发表于 2016-10-8 01:55:47
煮熟的鸭子飞不了,煮熟的楼主在哪里?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表