New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
【译】什么是CSS Modules ?我们为什么需要他们? #45
Comments
最近我对CSS Modules比较好奇。如果你曾经听说过他们,那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇,敬请关注,在下一篇博文中我们将介绍如何使用CSS Modules。如果你想亲自尝试并且掌握如何使用,第三部分将会很适合你,这一部分剖析了如何在React环境中使用。 什么是CSS Modules?根据官方的repository介绍,CSS Modules是:
这到底是什么呢?我们为什么要这么做呢?我们很快就进行介绍。首先,不要忘记HTML和CSS的工作原理。在HTML中一个类添加:
在CSS中这个class的定义如下:
只要CSS被添加到HTML文档上,那个 CSS Modules 和上面的方法不一样。我们不写纯HTML,我们需要在一个类似index.js这样的Javascript 文件中取写我们所有的标签。这里有一个例子来说明这是怎么回事(我们之后将会去看更多真实的实例):
在我们构建的步骤中,编译器将会搜索我们导入的styles.css文件,然后到我们刚刚写的js文件中,通过 通过构建工具生成的HTML也许像下面这样:
通过构建工具生成的CSS也许像下面这样:
这就是样式也有作用域的原因。它们的作用域是特定的模板。如果我们有一个buttons.css文件我们将在buttons.js模板中导入它,并且在css文件内的.btn class相对于其他模板(例如forms.js)也是不可用的,除非我们在这个文件中同样导入了进来。 为什么我们想要把CSS和HTML搞成这样?我们这样做的真真正正的原因是什么? 为什么我们要用CSS Modules?有了CSS Modules,就可以确保所有的样式能够服务于单个组件:
这样设计的目的在于解决CSS中的全局作用域问题。 你曾有过为了提升效率,节省时间去简略的写css吗?而且是在完全不考虑你会不会影响其他代码的情况下? 你曾有过在样式表的底部随机打了一些的比特和垃圾,然后尝试回过头来重新去组织但是从来没这么做吗? 你曾有过看到样式却不完全知道它的意义的时候吗?即使它们被用在了当前的标签上? 你曾有过思考如何去不破坏任何东西的情况下,去弃用一些现有的样式吗?考虑过这些样式是仅仅作用于自己还是依赖其它样式呢?或者是在哪里重新覆盖了样式了? 这些问题会让人很头痛,项目时间紧张,而你的心思又在窗外的花花世界。 但是当你有了CSS Modules之后,关键是这种默认本地作用域的概念,这个问题将会被避免。你必须去思考写样式的方便性。 例如,如果你在不应用CSS module-style class去做转换的情况下,在HTML中使用random-gross-class,这个样式将不会被应用,因为这个选择器将会被转换为._style_random-gross-class_0038089. composes 关键词我们现在拥有一个叫做type.css的模块去渲染text样式。在那个文件中,我们也许会有如下代码:
我们将在我们的模板中声明class:
编译后的模板上的标签会是下面这样:
使用composes关键词汇将2个class都绑定到元素上,从而避免了类似解决方案的一些问题,类似Sass中的@extend。 我们甚至可以在一个分离的CSS文件中去compose,从而实现继承。
不需要BEM在构建CSS module的过程中,不需要BEM。有2个原因:
很酷,难道不是吗? 这些仅仅是CSS Modules的部分优点。 如果你想学习更多,Glen Madden写了更多的这样做的好处。 这个系列的下一篇文章将会去探索如何在项目中使用Webpack和CSS Modules。我们将使用最新的ES2015的特性去实现,也会给出一些代码例子去引导大家去理解。 |
原文地址:https://css-tricks.com/css-modules-part-1-need/
The text was updated successfully, but these errors were encountered: