为什么引入CSS Modules

或者可以这么说,CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验,具体来说可以归纳为以下几点:

全局样式冲突

过程是这样的:你现在有两个模块,分别为A、B,你可能会单独针对这两个模块编写自己的样式,例如a.css、b.css,看一下代码

// A.js
import './a.css'
const html = '<h1 class="text">module A</h1>'

// B.js
import './b.css'
const html = '<h1 class="text">module B</h1>'

下面是样式:

/* a.css */
.text {
    color: red;
}

/* b.css */
.text {
    color: blue;
}

导入到入口APP中

// App.js
import A from './A.js'
import B from './B.js'

element.innerTHML = 'xxx'

由于样式是统一加载到入口中,因此实际上的样式合在一起(这里暂定为mix.css)显示顺序为:

/* mix.css */

/* a.css */
.text {
    color: red;
}

/* b.css */
.text {
    color: blue;
}
textbluejs
var moduleA = (function(document, undefined){
    // your module code
})(document)

var moduleB = (function(document, undefined){
    // your module code
})(document)
namespace

嵌套层次过深的选择器

namespacescopenamespacenamespace
.widget .table .row .cell .content .header .title {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 2rem;
}

在上一个元素的显示上使用了7个选择器,总结起来会有以下问题:

contenttitleitem

【注】CSS的渲染规则可以参看这篇文章探究 CSS 解析原理

会带来代码的冗余

由于CSS不能使用类似于js的模块化的功能,可能你在一个css文件中写了一个公共的样式类,而你在另外一个css也需要这样一个样式,这时候,你可能会多写一次,类似于这样的

/* a.css */

.modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.text {
    color: red;
}

/* b.css */
.modal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.text {
    color: blue;
}

那么在合并成app.css的时候,就会被编写两遍,虽然样式不会被影响,但是这样实际上也是一种字节浪费,当然,上述的这种情况完全是可以通过公用全局样式来达到目的,但是,这种代码重复通常是在不知情的情况下发生的。

一些解决方案

针对上述的一些问题,也有一些解决方案,具体如下:

CSS预处理器(Sass/Less等)

Sass,Less的用法这里不再赘述,如果不清楚,可以自己查阅相关资料去了解一下。

scope
SASS
/* app.sass */

@import './reset'
@import './color'
@import './font'

可以实际上编译之后,终究还是一个文件,因此不可避免的会出现冲突样式

BEM(Block Element Modifier)

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

BEM

BEM名词解释

  • Block:逻辑和页面功能都独立的页面组件,是一个可复用单元,特点如下:

    • 可以随意嵌套组合
    • 可以放在任意页面的任何位置,不影响功能和外观
    • 可复用,界面可以有任意多个相同Block的实例
  • Element:Block的组成部分,依赖Block存在(出了Block就不能用)

  • [可选]定义Block和Element的外观及行为,就像HTML属性一样,能让同一种Block看起来不一样

命名规则

Blockheadermenu
<style>
    .header { color: #042; }
</style>

<div class="header">...</div>
Elementtitleitem
<style>
    .header { color: #042; }
    .header__title { color: #042; }
</style>

<div class="header">
    <h1 class="header__title">Header</h1>
</div>
Modifieractivecurrentselected
<style>
    .header--color-black { color: #000; }
    .header__title--color-red { color: #f00; }
</style>

<div class="header header--color-black">
    <h1 class="header__title">
        <span class="header__title--color-red">Header</span>
    </h1>
</div>

【说明】

Block__Element-father__Element-son_Modifer

一个完整的示例

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

参考链接:

BEM解决了模块复用、全局命名冲突等问题,配合预处理CSS使用时,也能得到一定程度的扩展,但是它依然有它的问题:

  • 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难
  • 对于多人协作上,需要统一命名规范,这同样也会造成额外的effort

CSS Modules

说了这么多,终于要到正文了

什么是CSS Modules

根据CSS Modules的repo上的话来说是这样的:

CSS files in which all class names and animation names are scoped locally by default.

所以CSS Modules并不是一个正式的声明或者是浏览器的一个实现,而是通过构建工具(webpack or Browserify)来使所有的class达到scope的一个过程。

CSS Modules 解决了什么问题

  • 全局命名冲突,因为CSS Modules只关心组件本身,只要保证组件本身命名不冲突,就不会有这样的问题,一个组件被编译之后的类名可能是这样的:
/* App.css */
.text {
    color: red;
}

/* 编译之后可能是这样的 */
.App__text___3lRY_ {
    color: red;
}

命名唯一,因此保证了全局不会冲突。

  • 模块化
composes
.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>

从另一个模块中引入,可以这样写:

.element {
  composes: dark-red from "./colors.css";
  font-size: 30px;
  line-height: 1.2;
}
  • 解决嵌套层次过深的问题

因为CSS Modules只关注与组件本身,组件本身基本都可以使用扁平的类名来写,类似于这样的:

.root {
  composes: box from "shared/styles/layout.css";
  border-style: dotted;
  border-color: green;
}

.text {
  composes: heading from "shared/styles/typography.css";
  font-weight: 200;
  color: green;
}

CSS Modules 怎么用

CSS Modules不局限于你使用哪个前端库,无论是React、Vue还是Angular,只要你能使用构建工具进行编译打包就可以使用。

webpack

构建最初始的应用

.
├── build
│   └── bundle.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── styles
└── webpack.config.js

index.js作为程序入口,styles文件夹存放样式文件,配合webpack.config.js作为webpack配置文件。

// index.js
var html = `<div class="header">
	<h2 class="title">CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;

样式文件:

/* global.css */
* {
	margin: 0;
	padding: 0;
}

.container {
	padding: 20px;
}

/* index.css */
.header {
	font-size: 32px;
}

.title {
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}

模板文件:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css modules</title>
</head>
<body>
	<div id="container" class="container"></div>
	<script src="./build/bundle.js"></script>
</body>
</html>

全局安装依赖,配置执行脚本:

npm install webpack webpack-cli --save-dev

package.json

"scripts": {
    "build": "npx webpack && open index.html"
}
npm run build
> css-modules-demo@1.0.0 build /Users/yhhu/Documents/coding/css-modules-demo
> npx webpack && open index.html

Hash: 5810d2ecd760c08cc078
Version: webpack 4.17.1
Time: 78ms
Built at: 2018-08-26 15:09:31
    Asset      Size  Chunks             Chunk Names
bundle.js  3.97 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 196 bytes {main} [built]

加入样式以及loaders

package.json中加入能够处理css的loader

  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader',
        include: __dirname + '/src',
        exclude: __dirname + '/src/styles'
     	},
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {         
            }
          }
        ]
      }
    ]
  }

index.js中引入两个CSS文件

// index.js
import './styles/global.css'
import './styles/index.css'

const html = `<div class="header">
	<h2 class="title">CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;

编译之后的执行结果为:

在浏览器中显示为:

提取公有样式

buildbundle.js
./build/
└── bundle.js
  • 安装依赖
npm install --save-dev mini-css-extract-plugin
webpack.config.js
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

modules: {
    rules: [
        // {
        //   test: /\.css$/,
        //   use: [
        //   	{ loader: "style-loader" },
        //     {
        //     	loader: "css-loader",
        //     	options: {
        
        //     	}
        //     }
        //   ]
        // },
        {
            test: /\.css$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: './build/styles'
                }
              },
              { 
                loader: "css-loader",
                options: {
                    
                }
              }
            ]
        }        
    ]
},
plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
],
  • 在模板中引入样式文件
<!-- index.html -->

<!DOCTYPE html>
<head>
	<link rel="stylesheet" href="./build/main.css">
</head>
<body>
	<div id="container" class="container"></div>
	<script src="./build/bundle.js"></script>
</body>
  • 编译打包
main.css

开启css modules功能

css-loadercss modulesmodules: truecss-loaderwebpack.config.js
{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: './build/styles'
        }
      },
      { 
        loader: "css-loader",
        options: {
            modules: true
        }
      }
    ]
}        
index.js
import './styles/global.css'
import Index from './styles/index.css'

const html = `<div class=${Index.header}>
	<h2 class=${Index.title}>CSS Modules</h2>
</div>`

document.getElementById('container').innerHTML = html;
importcssIndex
main.css
* {
	margin: 0;
	padding: 0;
}

._2BQ9qrIFipNbLIGEytIz5Q {
	padding: 20px;
}
._3Ukt9LHwDhphmidalfey-S {
	font-size: 32px;
}

._3XpLkKvmw0hNfJyl8yU3i4 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}
inspector
container

全局作用域

:global(className)global.css
/* global.css */
* {
	margin: 0;
	padding: 0;
}

:global(.container) {
	padding: 20px;
}
main.css
.container

定义哈希类名

CSS Modules默认是以[hash:base64]来进行类名转换的,可辨识度不高,因此我们需要自定义

localIdentName
{ 
  loader: "css-loader",
  options: {
  	modules: true,
  	localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

类名组合

Sasscomposesindex.css
.red {
	color: red;
}

.header {
	font-size: 32px;
}

.title {
	composes: red;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}
redtitle
src-styles-index__red--1ihPk

除了在自身模块中继承,我们还可以继承其他文件中的CSS规则,具体如下:

stylescolor.css
/* color.css */
.red {
	color: red;
}

.blue {
	color: blue;
}
index.css
/* index.css */
.red {
	color: red;
}

.header {
	font-size: 32px;
}

.title {
	color: green;
	composes: blue from './color.css';
	composes: red;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}
color

答案是自身引入的声明的优先级会比较高。

总结

ReactVueAngular

参考链接