【转】可视化介绍CSS Modules是什么?

本文转载自:http://www.w3cplus.com/css/what-are-css-modules.html

你是否曾经为组件设计过样式,却只知道应用了不需要的CSS规则?

也许你会重新考虑CSS的另一个部分,所以规则不适用,或者你会添加!important规则,只是为了让它发挥作用。

这就是CSS Modules要解决的问题。让我们看看CSS Modules的官方定义:

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. (CSS Module是一个CSS文件,所有类名和动画名称默认都在本地范围内。)

这里的关键词是局部范围的。使用CSS Module,你的CSS类名与JavaScript中的本地变量类似。

顺便说一下,CSS Module只是一个.css文件。如果你打算使用CSS Module编译器,你可以把它叫做CSS Module。

让我们来设想一下目前为止的情况:

CSS Module

一个CSS Module进入编译器,而CSS则从另一边出来。

你在哪里得到CSS Module编译器?如果你在使用Webpack,你已经有了,只需要在css-loader中添加?modules选项。你可能看看这个Demo

如果这对你来说太抽象了,那让我们来看一个具体的例子:

CSS Module

注意meow类如何重命名为cat_meow_j3xk。让我们中断一下:

  • cat:文件名
  • meow:本地类名
  • j3xk:随机的hash值

这些组合可以创建cat_meow_j3xk,它在全局是独一无二的。这很重要,因为你的浏览器没有CSS的本地作用域概念。如果CSS规则在全局内不是唯一的,那么它们将会重叠。

到目前为止还不错,但是你如何获得这个全局唯一的名字呢?你是否要在所有的React组件中输入className="cat_meow_j3xk"?当然不是。

CSS Module实际上有另一个隐藏的输出。一个具有所有重命名类的JavaScript对象:

CSS Module

这里是最新的具体例子:

CSS Module

注意,JavaScript对象将meow作为键,它与您在CSS Module中选择的类名相匹配。object.meow将给你重新命名一个类。

要使用CSS Module,你可以将CSS添加到Web页面,并将JavaScript对象导入到组件中。让我们把它加到图中:

CSS Module

为了使它更加具体,让我们将其与一个React组件结合在一起。Cat.js是一个React组件,Cat.css是配套的CSS Module:

// Cat.css
.meow {
    color: orange;
}
// 生成的CSS
.Cat_meow_j3xk {
    color: orange;
}

// Cat.js
import React from 'react';
import styles from './Cat.css';

class Cat extends React.Component {
    render() {
        return (
            <div className={styles.meow}>Orange Cat</div>
        )
    }
}
export default Cat;

// 编译出来的JavaScript
{
    meow: 'Cat_meow_j3xk'
}

调用import styles from './Cat.css',其中styles.meow编译出来对应的就是Cat_meow_j3xk

React组件在一个div中设置了styles.meow,你可以看到示例中的文本变成了orange颜色。

总结

我知道,我们的工作只是设置了一个文本颜色为orange。但是在大项目中,它的作用和回报是很有用的。

每当我开始一个新的组件时,我就知道没有全局样式会干扰我的工作。

仍然困惑吗?也许你能通过例子学得更好?通过CSS Modules示例,将在CSS模块中运行将遇到的最常见的场景,并向你展示CSS Module编译器在每个实例中的行为。

顺便说一下,我花了几天时间才弄清楚CSS Modules是什么,以及它们是如何工作的。不要像我一样浪费时间,根据教程能让你快速掌握相关技术。如果你对CSS Module有更好的看法或建议,欢迎在下面的评论中与我们一起分享。

本文根据@Andrew的《What are CSS Modules? A visual introduction.》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://andrewhfarmer.com/what-are-css-modules/