BEM 是由 Yandex 团队提出的一种 CSS 命名方法论,即 Block(块)、Element(元素)和 Modifier(修改器)的简称,是 OOCSS 方法论的一种实现模式,底层仍然是面向对象的思想。
- BEM 规范下 classname 的命名格式为:
- 所有实体的命名均使用小写字母,复合词使用连字符 “-” 连接。
- Block 与 Element 之间使用双下画线 “__” 连接。
- Mofifier 与 Block/Element 使用双连接符 “–” 连接。
- modifier-name 和 modifier_value 之间使用单下画线 “_” 连接。
1. 通过 JS 生成 BEM 规范名称
在编写组件的时候如果通过手写 classname 的名称,那么需要经常写 - 、 __ 、 --,那么就会变得非常繁琐,BEM 命名规范是具有一定规律性的,所以可以通过 JavaScript 按照 BEM 命名规范进行动态生成。
1.1 初始化 hooks 目录
在 packages 目录下创建一个 hooks 目录,进入到 hooks 目录底下初始化一个 package.json 文件,修改内容如下:
{
"name": "@vision-ui-vue/hooks",
"version": "0.0.1",
"license": "MIT",
"main": "index.ts",
"module": "index.ts",
"unpkg": "index.js",
"jsdelivr": "index.js",
"types": "index.d.ts",
"peerDependencies": {
"vue": "^3.2.0"
}
}
1.2 创建 BEM 命名空间函数
在 hooks 目录下再创建一个 use-namespace 目录用于创建 BEM 命名空间函数,再在 hooks 目录下创建一个 index.ts 文件用于模块入口文件。
// index.ts
export * from './use-namespace'
// use-namespace/index.ts
import { computed, unref } from 'vue'
// 默认的命名空间
export const defaultNamespace = 'v'
// 状态前缀
const statePrefix = 'is-'
/**
* BEM 命名字符拼接函数
* @param namespace 命名空间
* @param block 块名
* @param blockSuffix 块的后缀
* @param element 元素名
* @param modifier 修改器名
* @returns 拼接后的BEM类名字符串
*/
const _bem = (
namespace: string,
block: string,
blockSuffix: string,
element: string,
modifier: string
) => {
// 默认是 Block
let cls = `${namespace}-${block}`
// 如果存在 Block 后缀,也就是 Block 里面还有 Block
if (blockSuffix) {
cls += `-${blockSuffix}`
}
// 如果存在元素
if (element) {
cls += `__${element}`
}
// 如果存在修改器
if (modifier) {
cls += `--${modifier}`
}
return cls
}
/**
* 用于创建和管理BEM类名的工具函数
* @param block 块名
* @returns 返回一个对象,包含用于创建BEM类名的各种方法
*/
export const useNamespace = (block: string) => {
// 基于Vue的computed创建动态命名空间
const namespace = computed(() => defaultNamespace)
// 创建块级类名 v-form
const b = (blockSuffix = '') =>
_bem(unref(namespace), block, blockSuffix, '', '')
// 创建元素级类名 v-input__inner
const e = (element?: string) =>
element ? _bem(unref(namespace), block, '', element, '') : ''
// 创建修改器类名 v-form--default
const m = (modifier?: string) =>
modifier ? _bem(unref(namespace), block, '', '', modifier) : ''
// 创建带后缀的块元素类名 v-form-item
const be = (blockSuffix?: string, element?: string) =>
blockSuffix && element
? _bem(unref(namespace), block, blockSuffix, element, '')
: ''
// 创建元素的修改器类名 v-scrollbar__wrap--hidden-default
const em = (element?: string, modifier?: string) =>
element && modifier
? _bem(unref(namespace), block, '', element, modifier)
: ''
// 创建块后缀的修改器类名 v-form-item--default
const bm = (blockSuffix?: string, modifier?: string) =>
blockSuffix && modifier
? _bem(unref(namespace), block, blockSuffix, '', modifier)
: ''
// 创建块元素的修改器类名 v-form-item__content--xxx
const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
blockSuffix && element && modifier
? _bem(unref(namespace), block, blockSuffix, element, modifier)
: ''
// 创建动作状态类名,支持两种调用方式
const is: {
(name: string, state: boolean | undefined): string
(name: string): string
} = (name: string, ...args: [boolean | undefined] | []) => {
const state = args.length >= 1 ? args[0]! : true
return name && state ? `${statePrefix}${name}` : ''
}
return {
namespace,
b,
e,
m,
be,
em,
bm,
bem,
is,
}
}
1.3 通过 SCSS 生成 BEM 规范样式
在 packages/theme-chalk 目录下创建一个 src 目录,在 src 目录下创建一个 mixins 目录。在 mixins 目录下新建件:config.scss、 mixins.scss 、 function.scss, config.scss 编写 BEM 的基础配置比如样式名前缀、元素、修饰符、状态前缀:
$namespace: 'v' !default; // 所有的组件以v开头,如 v-input
$common-separator: '-' !default; // 公共的连接符
$element-separator: '__' !default; // 元素以__分割,如 v-input__inner
$modifier-separator: '--' !default; // 修饰符以--分割,如 v-input--mini
$state-prefix: 'is-' !default; // 状态以is-开头,如 is-disabled
// 在 SCSS 中,使用 $+ 变量名:变量 来定义一个变量。在变量后加入 !default 表示默认值。给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值;但是如果变量还没有被赋值,则会被赋予新的值。
mixins.scss 编写 SCSS 的 @mixin 指令定义的 BEM 代码规范:
@use 'config' as *;
@use 'function' as *;
/**
* 定义 Block。
* @param $block - 指定的块名,将与全局命名空间和通用分隔符组合,用作类名。
* @content - 在生成的类中注入的内容。
*/
@mixin b($block) {
// 生成全局类名,并将其设置为当前作用域的一个变量。
$B: $namespace + $common-separator + $block !global;
// 使用动态生成的类名,插入传入的内容。
.#{$B} {
@content;
}
}
/**
* 定义 Element
* @param $element - 一个包含元素名称的列表,这些元素将被用来构建选择器。
*/
@mixin e($element) {
// 设置全局变量$E为传入的元素参数,用于后续的引用。
$E: $element !global;
// 使用&引用当前的选择器,为后续构建更复杂的选择器做准备。
$selector: &;
// 初始化$currentSelector为空字符串,后续将拼接成完整的选择器字符串。
$currentSelector: '';
// 遍历$element列表,将每个单元拼接到选择器字符串中。
@each $unit in $element {
$currentSelector: #{$currentSelector +
'.' +
$B +
$element-separator +
$unit +
','};
}
// 检查是否需要应用特殊的嵌套规则。
// 如果是,则使用@at-root将内容提升到当前选择器的外部,并嵌套在指定的选择器下。
// 如果不是,则直接使用@at-root将内容提升到当前选择器的外部。
@if hitAllSpecialNestRule($selector) {
@at-root {
#{$selector} {
#{$currentSelector} {
@content;
}
}
}
} @else {
@at-root {
#{$currentSelector} {
@content;
}
}
}
}
/**
* 定义修改器
* @param $modifier 一个包含修饰符单元的列表,这些修饰符将被添加到基础选择器之后。
* 每个修饰符单元将会以指定的分隔符连接到基础选择器上,生成完整的选择器。
* 例如,如果基础选择器是 ".class",修饰符列表是 ["a", "b", "c"],且分隔符是 "--",
* 那么将生成 ".class--a, .class--b, .class--c" 这些选择器。
* @content 在调用此mixin时提供的内容,将被放置在生成的选择器内部。
*/
@mixin m($modifier) {
$selector: &; // 存储当前的作用域选择器
$currentSelector: ''; // 初始化当前选择器字符串为空
// 遍历传入的修饰符列表,生成完整的选择器字符串
@each $unit in $modifier {
$currentSelector: #{$currentSelector +
$selector +
$modifier-separator +
$unit +
','};
}
// 使用@at-root指令,将内容置于顶层DOM结构中,确保生成的选择器生效
@at-root {
#{$currentSelector} {
@content; // 插入在mixin调用时提供的内容
}
}
}
/**
* 定义动作状态。
* @mixin when 一个用于根据状态动态生成样式的mixin。
* @param $state 状态名称,将被用作选择器的一部分。
* @content mixin内的内容将被插入到生成的选择器中。
*/
@mixin when($state) {
@at-root {
// 生成一个带有状态前缀的选择器,并插入内容
&.#{$state-prefix + $state} {
@content;
}
}
}
function.scss 定义一些 SCSS 的 @function 指令定义的函数:
@use 'config';
/**
* 该函数将选择器转化为字符串,并截取指定位置的字符。
* @param $selector - 需要转换的选择器对象。
* @return 返回转换后的选择器字符串。
*/
@function selectorToString($selector) {
$selector: inspect(
$selector
); // 使用inspect函数将选择器转化为字符串,出现错误时会抛出异常
$selector: str-slice($selector, 2, -2); // 使用str-slice函数截取字符串,去除首尾字符
@return $selector;
}
/**
* 判断父级选择器是否包含'--'
* @param $selector - 需要检查的选择器,可以是列表或字符串。
* @returns 如果选择器包含修饰符,则返回 true;否则返回 false。
*/
@function containsModifier($selector) {
$selector: selectorToString($selector); // 将选择器转换为字符串
@if str-index($selector, config.$modifier-separator) {
// 使用str-index函数查找'--'的存在位置,如果存在则返回true
@return true;
} @else {
// 如果没有找到修饰符分隔符,返回 false
@return false;
}
}
/**
* 判断父级选择器是否包含'.is-'
* @param $selector - 需要检查的选择器,可以是任何形式的选择器。
* @return 返回一个布尔值,如果选择器包含状态前缀则为true,否则为false。
*/
@function containWhenFlag($selector) {
$selector: selectorToString($selector); // 将选择器转换为字符串
@if str-index($selector, '.' + config.$state-prefix) {
// 使用str-index函数查找'.is-'的存在位置,如果存在则返回true
@return true;
} @else {
// 如果选择器中不包含状态前缀,返回false
@return false;
}
}
/**
* 判断父级是否包含 ':' (用于判断伪类和伪元素)
* @param $selector - 需要检查的选择器,可以是任何形式的选择器,函数会将其转换为字符串形式。
* @return 返回一个布尔值,如果选择器包含伪类,则返回 true;否则返回 false。
*/
@function containPseudoClass($selector) {
$selector: selectorToString($selector); // 将选择器转换为字符串
@if str-index($selector, ':') {
// 使用str-index函数查找':'的存在位置,如果存在则返回true
@return true;
} @else {
// 如果选择器中不包含':',返回false
@return false;
}
}
/*
* 判断父级选择器是否包含`--` `.is-` `:`这三种字符
* @param {String} $selector 选择器
* @return {String} 如果父级选择器包含以上三种字符中的任意一种,返回true;否则返回false
*/
@function hitAllSpecialNestRule($selector) {
@return containsModifier($selector) or containWhenFlag($selector) or
containPseudoClass($selector); // 判断是否包含特殊字符
}
2. 测试 BEM 规范
- 在根目录执行
pnpm install sass -D -w
- 接着执行
pnpm install @vision-ui-vue/hooks -D -w
把 hooks 引入到项目中 - 在 packages/components 下新建 button 目录,目录结构为
├── packages
│ ├── components
│ │ ├── button
│ │ │ ├── src
│ │ │ │ └── button.vue
│ │ │ └── index.ts
│ │ └── package.json
index.ts 内容:
import Button from './src/button.vue'
export default Button
button.vue 内容:
<template>
<button :clsaa="bem.b()">测试按钮</button>
</template>
<script lang="ts" setup>
import { useNamespace } from '@vision-ui-vue/hooks'
const bem = useNamespace('button')
</script>
- 进入 play 项目,修改 App.vue 文件,引入 button 组件:
<template>
<div>
<v-button></v-button>
</div>
</template>
<script setup lang="ts">
import VButton from '@vision-ui-vue/components/button'
import '@vision-ui-vue/theme-chalk/src/index.scss'
</script>
- 把 theme-chalk 目录中的样式也进行了导入,在 theme-chalk/src 下新建 button.scss 文件,文件内容如下:
@use 'mixins/mixins' as *;
@include b(button) {
color: aqua;
}
- 需要在 theme-chalk 目录下的 src 目录中的 index.scss 中导入 button.scss 文件
@use './button.scss';
- 运行 play 项目,查看效果
打开控制台,可以看到按钮的class为 v-button,颜色也改变了