搭建vue3组件库(三): CSS架构之BEM

ops/2024/10/18 18:28:03/

文章目录

    • 1. 通过 JS 生成 BEM 规范名称
      • 1.1 初始化 hooks 目录
      • 1.2 创建 BEM 命名空间函数
      • 1.3 通过 SCSS 生成 BEM 规范样式
    • 2. 测试 BEM 规范

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
import * 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
) => {// 默认是 Blocklet cls = `${namespace}-${block}`// 如果存在 Block 后缀，也就是 Block 里面还有 Blockif (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-formconst b = (blockSuffix = '') =>_bem(unref(namespace), block, blockSuffix, '', '')// 创建元素级类名 v-input__innerconst e = (element?: string) =>element ? _bem(unref(namespace), block, '', element, '') : ''// 创建修改器类名 v-form--defaultconst m = (modifier?: string) =>modifier ? _bem(unref(namespace), block, '', '', modifier) : ''// 创建带后缀的块元素类名 v-form-itemconst be = (blockSuffix?: string, element?: string) =>blockSuffix && element? _bem(unref(namespace), block, blockSuffix, element, ''): ''// 创建元素的修改器类名 v-scrollbar__wrap--hidden-defaultconst em = (element?: string, modifier?: string) =>element && modifier? _bem(unref(namespace), block, '', element, modifier): ''// 创建块后缀的修改器类名 v-form-item--defaultconst bm = (blockSuffix?: string, modifier?: string) =>blockSuffix && modifier? _bem(unref(namespace), block, blockSuffix, '', modifier): ''// 创建块元素的修改器类名 v-form-item__content--xxxconst 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]! : truereturn 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 '../common/var' as *;// 定义 Block
@mixin b($block) {$B: $namespace + $common-separator + $block !global;.#{$B} {@content;}
}// 定义 Element
@mixin e($element) {$E: $element !global;$selector: &;$currentSelector: '';@each $unit in $element {$currentSelector: #{$currentSelector +'.' +$B +$element-separator +$unit +','};}@if hitAllSpecialNestRule($selector) {@at-root {#{$selector} {#{$currentSelector} {@content;}}}} @else {@at-root {#{$currentSelector} {@content;}}}
}// 定义修改器
@mixin m($modifier) {$selector: &;$currentSelector: '';@each $unit in $modifier {$currentSelector: #{$currentSelector +$selector +$modifier-separator +$unit +','};}@at-root {#{$currentSelector} {@content;}}
}// 定义动作状态
@mixin when($state) {@at-root {&.#{$state-prefix + $state} {@content;}}
}

function.scss 定义一些 SCSS 的 @function 指令定义的函数：

@use 'config';// 该函数将选择器转化为字符串，并截取指定位置的字符
@function selectorToString($selector) {$selector: inspect($selector); // inspect(...) 表达式中的内容如果是正常会返回对应的内容，如果发生错误则会弹出一个错误提示。$selector: str-slice($selector, 2, -2); // str-slice 截取指定字符@return $selector;
}
// 判断父级选择器是否包含'--'
@function containsModifier($selector) {$selector: selectorToString($selector);@if str-index($selector, config.$modifier-separator) {// str-index 返回字符串的第一个索引@return true;} @else {@return false;}
}
// 判断父级选择器是否包含'.is-'
@function containWhenFlag($selector) {$selector: selectorToString($selector);@if str-index($selector, '.' + config.$state-prefix) {@return true;} @else {@return false;}
}
// 判断父级是否包含 ':' （用于判断伪类和伪元素）
@function containPseudoClass($selector) {$selector: selectorToString($selector);@if str-index($selector, ':') {@return true;} @else {@return false;}
}
// 判断父级选择器，是否包含`--` `.is-`  `：`这三种字符
@function hitAllSpecialNestRule($selector) {@return containsModifier($selector) or containWhenFlag($selector) orcontainPseudoClass($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'
</script>
  • 运行 play 项目，查看效果
    打开控制台，可以看到按钮的class为 v-button
    在这里插入图片描述

http://www.ppmy.cn/ops/28517.html

相关文章

Java面试重点之反射机制

Java面试重点之反射机制

一、 反射是什么&#xff1f; 允许程序在运行时查询和操作对象的类型信息。通过反射&#xff0c;程序能够在运行时获取对象的类定义信息&#xff0c;如类的名称、方法、字段、注解等&#xff0c;并且可以动态地调用对象的方法或访问其字段&#xff0c;而无需在编译时具体知道对…
阅读更多...
Go 语言基础（二）【数组、切片、指针、map、struct】

Go 语言基础（二）【数组、切片、指针、map、struct】

1、数组 特别需要注意的是&#xff1a;在 Go 语言中&#xff0c;数组长度也是数组类型的一部分&#xff01;所以尽管元素类型相同但是长度不同的两个数组&#xff0c;它们的类型并不相同。 1.1、数组的初始化 1.1.1、通过初始化列表{}来设置值 var arr [3]int // int类型的数…
阅读更多...
前端面试题整理

前端面试题整理

js相关 闭包&#xff1f;内存泄露&#xff1f;原型和原型链let const var 区别&#xff1f;什么事作用域&#xff1f;this指向相关的问题&#xff1f;call和apply有什么区别&#xff1f;隐式类型转换堆和栈的区别&#xff1f;基础数据类型和引用数据类型的区别&#xff1f;和深…
阅读更多...
python web开发开源规范

python web开发开源规范

Hello , 大家好。首先在五一假期给所有劳动者创造者们送上祝福&#xff0c; 本文聊聊我对python web开源相关的规范 PEP 8 Python编程风格指南:PEP 8是Python编程的官方风格指南&#xff0c;提供了关于代码格式、命名规范、注释等方面的建议。遵循PEP 8可以使代码更易于阅读和…
阅读更多...
windows ubuntu sed,awk,grep篇，6.sed 保持空间和模式空间命令

windows ubuntu sed,awk,grep篇，6.sed 保持空间和模式空间命令

目录 41.用保持空间替换模式空间(命令 x) 42.把模式空间的内容复制到保持空间(命令 h) 43.把模式空间内容追加到保持空间(命令 H) 44.把保持空间内容复制到模式空间(命令 g) 45.把保持空间追加到模式空间(命令 G) Sed 有两个内置的存储空间&#xff1a; z 模式空间:如你所知&…
阅读更多...
pyqt 按钮常用格式Qss设置

pyqt 按钮常用格式Qss设置

pyqt 按钮常用格式Qss设置 QSS介绍按钮常用的QSS设置效果代码 QSS介绍 Qt Style Sheets (QSS) 是 Qt 框架中用于定制应用程序界面样式的一种语言。它类似于网页开发中的 CSS&#xff08;Cascading Style Sheets&#xff09;&#xff0c;但专门为 Qt 应用程序设计。使用 QSS&am…
阅读更多...
【Python】使用Pandas和随机森林对鸢尾花数据集进行分类

【Python】使用Pandas和随机森林对鸢尾花数据集进行分类

我在鼓楼的夜色中 为你唱花香自来 在别处 沉默相遇和期待 飞机飞过 车水马龙的城市 千里之外 不离开 把所有的春天 都揉进了一个清晨 把所有停不下的言语变成秘密 关上了门 莫名的情愫啊 请问 谁来将它带走呢 只好把岁月化成歌 留在山河 &#x1f3b5; 鹿…
阅读更多...
Element对象

Element对象

Element对象 Element是一个通用性非常强的基类&#xff0c;所有Document对象下的对象都继承自它&#xff0c;这个对象描述了所有相同种类的元素所普遍具有的方法和属性&#xff0c;一些接口继承自Element并且增加了一些额外功能的接口描述了具体的行为&#xff0c;例如HTMLEle…
阅读更多...
最新文章

Copyright @ 2022~2023