BEM 和 CSS Modules
简介
CSS 入门简单，深入就比较难，样式简单维护难。
因为 CSS 是全局性的，所以很容易就出现样式冲突的问题。为解决这个问题。最通常的做法是 CLASS 命
名写长一点或者加一层父级选择器从而降低冲突的几率。但是这样 CSS 的命名就变得很混乱。因此就出
现了这样一种解决方案：命名约定。例如：BEM、OOCSS、AMCSS、SMACSS。其中使用最为广泛的是
BEM。
CSS 的代码很难复用，需要大量编写重复的代码。因此出现了 less、scss 这样预编译语言。
前端已经模块化了，按理来说 CSS 也应该组件化。我们再引入组件的时候应该只用引入组件对应的 CSS
即可。这时候出来了一种解决方案：CSS Modules
在这里我们不来描述 less 和 scss。我们来看一下 BEM 和 CSS Modules
BEM
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称
使用 BEM 规范来命名 CSS，组织 HTML 中选择器的结构，利于 CSS 代码的维护，使得代码结构更清晰（弊端
主要是名字会稍长）。
规则说明：
一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）
属于块的某部分，可作为一个元素（Element）
用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier）
以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器或元素和修饰器的间隔，以中划
线 - 来作为 块|元素|修饰器 名称中多个单词的间隔
在样式文件中，仅以类名作为选择器，不使用 ID 或标签名来约束选择器，且 CSS（或者 SCSS 编译后的
CSS）中的选择器嵌套不超过 2 层，增加效率和复用性，减少选择器之间的耦合度
BEM 规范虽然结构比较清晰，但有时候会产生代码冗余。为避免写太多重复性的代码，我们要学会善于
利用预编译语言（适当地使用 @include @extend 等）。
更加详细的可以查看官网：官网地址
CSS Modules
CSS Modules 不是将 CSS 改造的具有编程能力，而是加入了局部作用域、依赖管理。可以有效避免全局污染和
样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力。
webpack 自带的 css-loader 组件，自带了 CSS Modules，通过简单的配置即可使用：
module.exports = {
// ...
module: {
// ...
rules: [
// ...
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// 开启模块化
modules: true,
// 指定编译的 CSS 名
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
]
}
]
}
}
指定作用域
CSS module 将 class 转换成对应的全局唯一 hash 值来形成局部作用域。使用了 CSS Modules 后，就相当于给
每个 class 名外加了一个 :local 这是默认的，也可以显式使用。当然，如果你想切换到全局模式，CSS Modules
允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的 class，都不会被编译成哈希字符串
/* 全局样式 */
:global(.color-red) {
color: red;
}
/* 等同于 :local(.color-warn) */
.color-warn {
color: #e64340;
}
样式复用
对于样式复用，CSS Modules 提供了 composes 组合 的方式来处理。一个选择器可以继承另一个选择器的规
则。
.color-warn {
color: #e64340;
}
.span {
composes: color-warn;
/* 继承来自其他文件的样式 */
composes: shadow from './author.css';
border: 1px soild #ccc;
}
如何使用
react 中使用
import React, { Component } from 'react'
import styles from './styles.css'
class Demo extends Component {
render() {
return <span className={styles.span}>我是一串文字</span>
}
}
export default Demo
vue 中使用
<template>
<div>
<span :class="$style.red">我是一串文字</span>
</div>
</template>
<style module>
.red {
color: red;
}
</style>
vue 中的 scoped 和 module 不太一样。上边示例如果使用 scoped 则最终会打包成这个样子：.red[data-v-
0467f817]。如果我有个 red 样式优先级很高则还是会影响这里的样式。使用 module 则更加彻底一些。
注意事项
CSS Modules 只转换 class 和 id，此外的标签选择符、伪类等都不会被转换，建议只使用 class
所有样式通过 composes 组合来实现复用
不叠加多个 class
不嵌套多个 class
网友评论