你的位置:首页 > 网页设计

[网页设计][翻译]理解CSS模块方法


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

拿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 = `<div > CSS Modules are fun.</div>`;

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

<div >CSS Modules are fun.</div>
._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'}

以上配置会在你的页面插件<style>标签。这里需要一个webpack的extract text插件来去掉这个标签

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

Browserify

使用Browserify,直接用命令行,代码参数有点多。可以使用npm来运行命令,配置一下package.json文件,代码如下:

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

解释一下,运行npm build,就相当于调用build对应的相关命令。处理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 在编译完样式后再运行autoprefixer插件。

总结

现在,CSS模块系统的生态圈还太小,但我相信,随着越来越多的人认识到,这是适应于从小到大项目的解决方案,它会发展得越来越好。

CSS模块化思想是正确的路。我也不是说本文介绍的方法,就是最好的解决方案,但已经可以把CSS书写得,具备以下特征:模块化,作用域或可重用。

想了解更多相关信息,可参阅CSS模块项目创建人,Glen Maddern的《this introduction to CSS Modules》的文章。

原文:Understanding the CSS Modules Methodology

原文链接:http://www.sitepoint.com/understanding-css-modules-methodology/