当前位置:Gxlcms > html代码 > [翻译]理解CSS模块方法_html/css_WEB-ITnose

[翻译]理解CSS模块方法_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:5人阅读

在这个前端发展日新月异的世界,能够找到有所影响的概念相当困难,而将其准确无误的传达,让人们愿意尝试,更是难上加难。

拿CSS来看,在我们写CSS时,工具侧最大的变化,也就是CSS处理器的使用,如:可能公认最好的SASS。还有PostCSS,提供了另一种不同的解决方案,但也相差不大,属于同种东西,都是输入浏览器不支持的语法,然后输出浏览器支持的语法。(这里和之前的文章认识不同可以点击《PostCSS的认识误区》查看详细)

现在,引入了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模块定义为一种把相关CSS代码组织成组件,并避免命名冲突的方法。(不用为你组件的命名担心,在构建的过程中会自动生成)。

CSS模块是怎么工作的?

CSS模块要放到构建过程中处理,它本身并不做什么。这看上去像是webpack或browserify的插件。它的工作原理是:当你在js模块里调用CSS模块时(比如:React组件),CSS模块将根据文件中动态作用域或命名空间里的类名, 声明一个对象字面量,字面量中的类名将被js以字符串的形式调用。

让我们用一个例子来说明。

建一个简单的CSS文件,.base类不是项目中唯一的,它不是作为实际的类名来使用的。它相当于样式里的一个别名,这个别名将在js模块中使用。

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

这里看一下,怎么在JS组件中使用。

import styles from './styles.css';element.innerHTML = `
CSS Modules are fun.
`;

以上代码会生成下面这样的代码(使用webpack构建工具的默认配置):

CSS Modules are fun.
._20WEds96_Ee1ra54-24ePy {  color: deeppink;  max-width: 42em;  margin: 0 auto;}

类名,可以通过配置把类名加上特殊前缀,或使用短命名,但这并不是重点(虽然短命名,代表着更少的CSS样式)。

重点是指出,类名是动态生成的,唯一的,并且和样式表正确映射的。

几个关于CSS模块的观点

上面讲了它是如何工作的。现在你心里一定有疑惑,下面让我们一一解决。

生成的代码太丑了!

类名又不是为了漂亮。它存在的目的是把样式应用到元素上,所以这并不值得关注。

不太容易调试

只是是要通过构建过程生成的代码,调试起来都不容易。Sass也不容易调试,但可以使用sourcemap,css模块也可以。实际上尽量类名是生成的,但根据模块里的具体样式调试并不难。如果你知道你正在调试的是哪个模块,你就可以去对应模块找到对应的样式了。

样式没法重用

重用性是没错的,但CSS模块的目的就是把样式组件化,清除全局的冲突和依赖。

另外,你也可以定义全局的类(用:global()),比如一些公用的样式。这些类名也是可以在js组件中调用的

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

CSS模块也可以像SASS的@extend一样,通过存在的模块来扩展。不是直接复制一份样式过来,而是对各选择器样式进行合并。

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

CSS模块需要其它的构建工具,如:webpack,browserify等工具

这和SASS编译.scss文件为正确的CSS样式,PostCSS把样式处理为浏览器兼容的代码一样。既然已经使用了构建工具,这点也不用多想了。

为什么还在讨论这些点?

因为不确定未来的CSS模块是不是现在这样的,但这一定是样式书写的方向。大型网站使用的大量的全局样式,不适合分解成小的组件。

全局唯一的CSS名,既强大又脆弱。无论是CSS模块还是以后其它工具。都需要找到既可以具备全局样式的公用,又可以避免同作用域下样式的命名冲突的解决方案。

入门

上面提到了,使用CSS模块需要webpack或browserify来构建。

Webpack

使用webpack,先修改webpack.config.js文件,添加以下配置项,开启CSS模块功能。

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

以上配置会在你的页面插件