什么是CSS模块以及你为什么需要它们?| CSS-Tricks

2018-06-14 admin

#什么是CSS模块以及你为什么需要它们?

我最近对CSS模块很好奇。如果你还没有听说过它们,这篇文章就是为你而写。我们将了解CSS模块以及它的目的是什么。如果你也感兴趣,请持续跟踪,下一篇文章将关于怎样使用CSS模块。如果你想进一步提高你的CSS模块使用技能,第三部分将关于在React环境中使用它们。

系列文章

Part 1:什么是CSS模块以及你为什么需要它们?(你现在就在这里!) Part 2:怎样开始用上CSS模块 Part 3: React + CSS Modules = ?

什么是CSS模块?

根据这篇文章,CSS模块是:

CSS files in which all class names and animation names are scoped locally by default. CSS文件中的所有类名(class names) 和动画名(animation names) 的作用域都默认为当前作用域。

所以CSS模块不是浏览器中的 官方标准(official spec) 或者 实践(implementation) 而是一个(在Webpack或者Browserify的帮助下)改变类名和选择器的作用域到当前文件(类似于命名空间)的构建过程。

这看起来像什么以及为什么这样呢?我们将马上看到它。首先,记住通常情况下HTML和CSS是怎么工作的。一个类名应用到HTML中:

<h1 class="title">An example heading</h1>

在CSS中定义这个类:

.title { background-color: red; }

一旦这个CSS被应用到这个HTML文档中,应用这个类的h1的背景色将变为红色。我们不需要处理CSS或者HTML。浏览器明白这些文件的格式。

CSS模块采用了不同的方法。与写纯HTML不同,我们需要在一个JavaScript文件中,比如index.js写我们的标记。下面这个例子告诉我们它将怎样工作(稍后我们将采用一个更实际的例子):

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

在我们的构建过程中,编译程序将查看我们引入的styles.css文件,随后查看我们的JavaScript文件,将.title类通过styles.title应用。我们的构建过程接着将处理这些到一个新的、分离的HTML和CSS文件,用一个新的字符串替换HTML类属性(HTML Class )和CSS选择器类(CSS selector class)。

生成的HTML文件可能是这样:

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

生成的CSS文件可能是这样:

._styles__title_309571057 { 
    background-color: red; 
}

img1

之前的类属性和选择器.title已经完全不存在了,取而代之的是一个全新的字符串。我们之前的CSS已经根本不提供给浏览器了。

正如Hugo Giraudel said 在他关于这个主题的教程中提到的:

[the classes] are dynamically generated, unique, and mapped to the correct styles. [这些类]是动态生成的,是独一无二的,并映射到正确的样式。

这就是样式作用域的含义。他们的作用域是特定的模板。如果我们有一个buttons.css文件,它将只被我们引入到buttons.js模板中,那么其他模板(比如forms.js)将不能使用.btn这个类,除非我们也明确的将buttons.js引入到forms.js中。

为什么我们想要将CSS与HTML混合来完成这些?我们究竟为什么要这样使用它?

为什么我们应该使用CSS模块?

使用CSS模块,它将保证所有样式都作用于单个组件: 1.在一个地方 2.只应用于该组件而没有别的

此外,任何组件都可以有一个真正的依赖关系,如

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

这种做法的目的是为了解决css中全局作用域_(global scope)_的问题

(This approach is designed to fix the problem of the global scope in CSS.)

你曾经有过试图在一个缺乏时间和资源的情况下尽快写出简单的CSS而不用考虑它对其他造成的影响的情况吗?

你曾经有在样式表的底部残留一些随意的不好的片段并且尝试去组织他们但是从来没有组织吗?

你曾经碰到过一些你并不能完全确认它的作用或者是否已经被使用的样式吗?

你曾经是否考虑过你可以移除一些样式而不破坏其他?疑惑这个样式是取决于自己还是依赖于其他?或者在其他地方重写样式?

这些问题可能会让你很头疼,延长项目的截止日期,并且忧伤的、渴望的望着窗外。

使用CSS模块以及默认当前作用域的理念,这些问题都将被避免。当你写样式时你必须思考样式的最终结果。

比如,如果你在HTML中使用random-gross-class而没有将其应用为一个CSS模块风格的类,这个样式不会被应用,因为CSS选择器将会被转换为._style_random-gross-class_0038089.

composes关键字

建设我们有一个命名为type.css的文本样式模块。在这个文件中我们可能有以下内容:

.serif-font {  
    font-family: Georgia, serif;
}  
.display {  
    composes: serif-font;  
    font-size:  30px;  
    line-height:  35px;  
}

我们将在我们的模板中这样声明它们:

import type from  "./type.css"; 
element.innerHTML =  
    `<h1 class="${type.display}"> 
        This is a heading 
    </h1>`;

最终结果如下:

<h1 class="_type__display_0980340 _type__serif_404840">
    Heading title 
</h1>

通过使用composes关键字,所有样式都被绑定在元素中,从而避免了一些类似的解决方案的问题,比如Sass的@extend

我们甚至可以在一个独立的CSS文件中引入一个特定的类:

.element {  
    composes: dark-red from "./colors.css";  
    font-size:  30px; 
    line-height:  1.2; 
}

不需要BEM

当我们使用CSS模块时,我们并不需要使用BEM。有两个原因:

  1. 简单的解析:像types.display这样的代码对于开发者来说和BEM-y的font-size__serif--large一样清晰明白。

  2. 当前作用域:假设我们在一个模块中有一个类.big改变font-size.在另一个模块中我们用一个 相同的类名 .big来增加不同数量的paddingfont-size。这完全没有问题!他们不会冲突,因为这些样式将谨慎的作用于当前作用域。即使有一个模块同时引入了这两个样式,在我们构建的过程中也专门为每一个类制定了自己的自定义名称。换句话说,专指性的问题在CSS模块中消失了。

很酷吧?

这些都是使用CSS模块的一些好处。

如果你有兴趣学习更多, Glen Madden写了大量的 关于CSS模块的其他好处。

本系列的下一篇文章将关于怎样用Webpack和CSS模块启动一个项目。我们会使用ES2015新特性并且在此过程中使用一些示范代码来引导。

进一步阅读

原文链接:https://zcfy.cc/article/what-are-css-modules-and-why-do-we-need-them-css-tricks-970.html

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34000.html

文章标题:什么是CSS模块以及你为什么需要它们?| CSS-Tricks

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
为什么AngularJS能够成功?
AngularJS 为什么成功了? 写在前面的话 继上一篇总结之后, 觉得必须补充一下 AngularJS 与 Ionic 的技术性话题 于是, 连夜写了这第一篇. 讲述了 AngularJS 与其他对手之间的优与缺. 我有任何理解错误, ...
2015-11-12
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
回到顶部