专栏首页京程一灯理解CSS模块化

理解CSS模块化

在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。

把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中, Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sass略有不同,但是殊途同归——都是用浏览器不能解析的语法编写,并且最终编译成浏览器能够理解的语法。

现在,又有一位新的成员出现了,它就是CSS模块。本文就将介绍CSS模块化的诸多优点,以及如何编写模块化的CSS。

什么是CSS模块

首先,让我们从官方文档入手:

A CSS Module is 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模块中使用的类在样式表中的别名。

.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

下面是该CSS类在JavaScript组件中的使用方式:

import styles from './styles.css';

element.innerHTML = <div class="${styles.base}">
  CSS Modules are fun.
</div>;

最终,它将生成下面这个东西(当使用webpack的默认步骤时):

<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>
._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

当然,生成的类名可以通过配置,使得它的长度更短或者遵循一些特定的模式。当然了,这些最终都不重要(虽然短的类名意味着更短的样式表),重点在于这些类名是动态生成的、唯一的且和正确的样式表一一对应的。

一些需要注意的地方

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

这看起来太丑了

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

这非常难debug啊

由于需要有一个编译的步骤,所以直接debug是非常困难的。其实,像Sass直接debug也是相当不容易的,所以我们才有了 sourcemaps。对于CSS模块,我们也可以设置sourcemap。

其实,我还想说的是,虽然在模块中,类的名字是自动生成而不可预知的,但是对于模块来说,它还是比样式表更容易debug的。只要你知道当前在开发者工具中查看的样式属于哪个模块,在相应的样式表中也是很容易定位。

这使得样式不容易复用啦!

这句话既对也不对。一方面来说,确实如此。但这是因为模块将CSS样式和组件相绑定,从而不会发生全局样式的冲突。这其实是一件好事,我相信你也会同意的对不对。

另一方面,要定义全局样式也是可以的,只要使用:global()就好了。比如,作者需要保留的全局辅助样式。

:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

CSS模块还可以从其他模块中继承样式,这和Sass中的@extend方法其实是一样的。它不会拷贝样式,只是将选择器连接到继承的样式中。

.base {
  composes: appearance from '../AnoherModule/styles.css';
}

它需要webpack,Browserify或者其他工具!

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

我们究竟为什么要讨论这个东西?

其实,我甚至不确定CSS模块在未来到底会不会继续存在,不过,我确定这是一种编写样式的正确方式。试想,在拆分成许多细小组件的庞大站点中,却拥有一个臃肿的全局样式表,这肯定是不合适的。

CSS统一的名空间使得它既强大又脆弱。而CSS模块化或者未来延续这个思想的其他工具可以在支持样式复用的同时,避免命名冲突,这是一个双赢的选择。

入门

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

Webpack

先从webpack版本的模块化开始。在webpack.config.js中,加上如下配置,使得webpack将CSS文件作为CSS模块来看待:

{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules'
}

这时,它将把样式注入到页面中的``元素中。这可能不是我们想要的,使用extract text plugin for webpack,我们可以很方便的抽取出样式表:

{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')
}

对于webpack,要讲的就是这么多了。

Browserify

我只在命令行中用过Browserify,所以我猜使用起来会更复杂一些。在package.json文件中,加入 npm script :

{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}

这条命令告诉Browserify运行src/index.js,返回dist/index.js,并且使用 css-modulesify将样式表编译至dist/main.css。如果你想再加上Autoprefixer,那么命令可以写成这样:

{
  "scripts": {
    "build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"
  }
}

如你所见,使用--after选项可以在编译完成样式表时候,继续对它进行处理。

总结

从今天看来,CSS模块化系统和生态确实有些原始了,从Browserify中的配置就能看出来。不过,我确信CSS模块化将变得更好,并且越来越多的人将意识到不管对小项目还是大项目来说,这都是一个很好的方法。

我认为CSS模块化背后的思想是正确的。当然,我不是说这个库就是最佳解决方案,但是,它确实包含了一些CSS应该采用的写法:模块化、作用域隔离、同时支持复用。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 7 个开放式 CSS 面试题及回答策略 [每日前端夜话0x2E]

    这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。

    疯狂的技术宅
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • 只写CSS的禅

    CSS不受欢迎是一个很普遍的现象。导致这一现象的原因有很多,但可以归结为:CSS的不可预测性。如果你在开发中从未有过这种经历:过调试一个样式时,一不小心破坏布局...

    疯狂的技术宅
  • VS Code中6个令人惊叹的CSS扩展

    Visual Studio Code最令人印象深刻的部分之一是可定制性,尤其是通过扩展。随着大量开发人员创建扩展,功能实际上是无穷无尽的!

    Javanx
  • 第三届 CSS 开发者大会笔记

    这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

    Joel
  • 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    Sb_Coco
  • 利用CSS注入(无iFrames)窃取CSRF令牌

    CSS相信大家不会陌生,在百度百科中它的解释是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 ...

    FB客服
  • TypeScript 中使用 CSS Modules

    CSS 的全局性 相当长一段时间 CSS 总是在页面上作为一个全局的存在,以前这个『特性』影响还不算很大,命名上注意一点,比如使用 BEM 也能一定程度上解决问...

    Bob.Chen
  • 学习纲要:CSS 基础概念

    Joel
  • 只写CSS的禅

    CSS不受欢迎是一个很普遍的现象。导致这一现象的原因有很多,但可以归结为:CSS的不可预测性。如果你在开发中从未有过这种经历:过调试一个样式时,一不小心破坏布局...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券