什么是CSS Modules ?我们为什么需要他们
原文地址:https://css-tricks.com/css-mo...
最近我对CSS Modules比较好奇。如果你曾经听说过他们,那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇,敬请关注,在下一篇博文中我们将介绍如何使用CSS Modules。如果你想亲自尝试并且掌握如何使用,第三部分将会很适合你,这一部分剖析了如何在React环境中使用。
什么是CSS Modules?
根据官方的repository介绍,CSS Modules是:
所有的class的名称和动画的名称默认属于本地作用域的CSS文件。
所以CSS Modules不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。(构建通常需要webpack或者browserify的帮助)。通过构建工具的帮助,可以将class的名字或者选择器的名字作用域化。(类似命名空间化。)
这到底是什么呢?我们为什么要这么做呢?我们很快就进行介绍。首先,不要忘记HTML和CSS的工作原理。在HTML中一个类添加:
<h1 class="title">An example heading</h1>
在CSS中这个class的定义如下:
.title {
background-color: red;
}
只要CSS被添加到HTML文档上,那个<h1>
的背景色就是红色。我们不需要人为处理CSS和HTML文件。浏览器本身自己就理解这些文件的格式。
CSS Modules 和上面的方法不一样。我们不写纯HTML,我们需要在一个类似index.js这样的Javascript 文件中取写我们所有的标签。这里有一个例子来说明这是怎么回事(我们之后将会去看更多真实的实例):
import styles from "./styles.css";
element.innerHTML =
`<h1 class="${styles.title}">
An example heading
</h1>`;
在我们构建的步骤中,编译器将会搜索我们导入的styles.css文件,然后到我们刚刚写的js文件中,通过styles.title
使得.title class可用。我们的构建步骤将会同时处理这些东西成为新的,分离的HTML和CSS文件,并且用一个新的字符串去替换HTML和CSS选择器的class。
通过构建工具生成的HTML也许像下面这样:
<h1 class="_styles__title_309571057">
An example heading
</h1>
通过构建工具生成的CSS也许像下面这样:
._styles__title_309571057{
background-color: red;
}
class属性和.title选择器已经完全不见了,取而代之的是这个全新的字符串;我们的源CSS文件也没有为浏览器提供服务。
就像Hugo Griaudel在他的这一模块的教程中所说:
[the classes]是动态生成的,唯一的,而且和当前的样式有映射关系的。
这就是样式也有作用域的原因。它们的作用域是特定的模板。如果我们有一个buttons.css文件我们将在buttons.js模板中导入它,并且在css文件内的.btn class相对于其他模板(例如forms.js)也是不可用的,除非我们在这个文件中同样导入了进来。
为什么我们想要把CSS和HTML搞成这样?我们这样做的真真正正的原因是什么?
为什么我们要用CSS Modules?
有了CSS Modules,就可以确保所有的样式能够服务于单个组件:
- 集中在一个地方
- 只应用于那个组件,其他组件不适用
除此之外,任何组件都能拥有真正的依赖,就像下面这样:
import buttons from "./buttons.css";
import padding from "./padding.css";
element.innerHTML = `<div class="${buttons.red}${padding.large}">`;
这样设计的目的在于解决CSS中的全局作用域问题。
你曾有过为了提升效率,节省时间去简略的写css吗?而且是在完全不考虑你会不会影响其他代码的情况下?
你曾有过在样式表的底部随机打了一些的比特和垃圾,然后尝试回过头来重新去组织但是从来没这么做吗?
你曾有过看到样式却不完全知道它的意义的时候吗?即使它们被用在了当前的标签上?
你曾有过思考如何去不破坏任何东西的情况下,去弃用一些现有的样式吗?考虑过这些样式是仅仅作用于自己还是依赖其它样式呢?或者是在哪里重新覆盖了样式了?
这些问题会让人很头痛,项目时间紧张,而你的心思又在窗外的花花世界。
但是当你有了CSS Modules之后,关键是这种默认本地作用域的概念,这个问题将会被避免。你必须去思考写样式的方便性。
例如,如果你在不应用CSS module-style class去做转换的情况下,在HTML中使用random-gross-class,这个样式将不会被应用,因为这个选择器将会被转换为._style_random-gross-class_0038089.
composes 关键词
我们现在拥有一个叫做type.css的模块去渲染text样式。在那个文件中,我们也许会有如下代码:
.serif-font {
font-family: Georgia,serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}
我们将在我们的模板中声明class:
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关键词汇将2个class都绑定到元素上,从而避免了类似解决方案的一些问题,类似Sass中的@extend。
我们甚至可以在一个分离的CSS文件中去compose。
.element{
compose: dark-red from "./colors.css";
font-size: 30px;
line-height: 1.2;
}
不需要BEM
在构建CSS module的过程中,不需要BEM。有2个原因:
- 易解析- 类似type.display这样的代码,对于开发者来说就像BEM-y的.font-size__serif--large。当BEM选择器变长时,可能更容易被理解。
- 本地作用域- 比如我们在模块中有一个类似.big去修改font-size属性的class。同样我们可能还会用.big去同时增大padding和font-size。这没关系!他们不会冲突,因为作用域中的样式是有各自意义的。甚至一个module引入2个样式表,然后它有通常的名字我们的构建工具会为那个class加上前缀作区分。换句话说:CSS modules消除了特殊性问题。
很酷,难道不是吗?
这些仅仅是CSS Modules的部分优点。
如果你想学习更多,Glen Madden写了更多的这样做的好处。
这个系列的下一篇文章将会去探索如何在项目中使用Webpack和CSS Modules。我们将使用最新的ES2015的特性去实现,也会给出一些代码例子去引导大家去理解。
什么是CSS Modules ?我们为什么需要他们的更多相关文章
- 在Angular1.X中使用CSS Modules
在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...
- CSS modules 与 React中实践
最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...
- 在React中使用CSS Modules设置样式
最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...
- Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- 在vue中使用css modules替代scroped
前面的话 css modules是一种流行的模块化和组合CSS的系统. vue-loader提供了与css modules的集成,作为scope CSS的替代方案.本文将详细介绍css modules ...
- css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
- CSS Modules In Webpack
1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式. 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名 ...
- CSS Modules 与 scoped 的不一样
What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...
- CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分 ...
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
在我们的产品中,均使用CSS Modules来作为样式解决方案,大致的代码是这样的: import React from 'react'; import styles from './table.cs ...
随机推荐
- 『无为则无心』Python日志 — 66、将日志信息保存到文件中
目录 1.把日志信息保存到文件中 2.拓展 (1)观察代码 (2)提出问题 (3)问题说明 1.把日志信息保存到文件中 代码如下所示: """ logging模块是Pyt ...
- Python:GUI库tkinter(三)
这一章是对前两章的总结: Python:GUI库tkinter(一) Python:GUI库tkinter(二) 前两章是对控件的介绍,第一章可以知道各控件使用时的具体参数,第二章以具体的例子展示了每 ...
- vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式
在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...
- Cache一致性与DMA
cache一致性与DMA 第一个问题 对于进行DMA操作的设备, 并不是所有系统都保持它们的cache一致性.在这种情况下, 准备进行DMA的设备可能从RAM得到陈旧的数据, 因为脏的cache行可能 ...
- Java 中线程池的 7 种创建方式!
在 Java 语言中,并发编程都是通过创建线程池来实现的,而线程池的创建方式也有很多种,每种线程池的创建方式都对应了不同的使用场景,总体来说线程池的创建可以分为以下两类: 通过 ThreadPoolE ...
- SQL Server内置的HTAP技术
SQL Server内置的HTAP技术 目录 背景 SQL Server在OLAP上的发展 SQL Server的初代HTAP SQL Server逐渐增强的HTAP SQL Server列存总结 H ...
- git 回滚方式
git push 命用于从将本地的分支版本上传到远程并合并. 命令格式如下: git push <远程主机名> <本地分支名>:<远程分支名> 如果本地分支名与远程 ...
- 创世区块配置文件genesis.json的格式解读
创世区块配置文件genesis.json的格式解读 中文网站上关于genesis 的解析大多数都来自于这个Gist:Ethereum private network configuration gui ...
- 远程控制Windows2003下安装Pcanywhere导致Awgina.dll出错的解决办法
远程控制的时候出现的问题引用 症状启动计算机时,"欢迎使用 Windows"登录屏幕不出现.您还可能会看到与下面的某条信息类似的错误信息: ? 一个最近安装的程序使欢迎屏幕和快速用 ...
- Java基础——Object类
一.概述: Object是类层次结构的根,每个类都可以将Object作为超类.所有类都直接或者间接的继承该类 有一个构造方法 public Object() 面向对象中子类的构造方法默认访问的是父类的 ...