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

搬砖的小白2024-05-02 17:56

文章目录

    • [1. 通过 JS 生成 BEM 规范名称](#1. 通过 JS 生成 BEM 规范名称)
      • [1.1 初始化 hooks 目录](#1.1 初始化 hooks 目录)
      • [1.2 创建 BEM 命名空间函数](#1.2 创建 BEM 命名空间函数)
      • [1.3 通过 SCSS 生成 BEM 规范样式](#1.3 通过 SCSS 生成 BEM 规范样式)
    • [2. 测试 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 文件,修改内容如下：

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 文件用于模块入口文件。

ts 复制代码 
// index.ts
import * from './use-namespace'
ts 复制代码 
// 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 的基础配置比如样式名前缀、元素、修饰符、状态前缀：

bash 复制代码 
$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 代码规范:

css 复制代码 
@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 指令定义的函数：

css 复制代码 
@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) 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 内容：

javascript 复制代码 
import Button from './src/button.vue'
export default Button

button.vue 内容：

html 复制代码 
<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 组件：
html 复制代码 
<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
相关推荐
Mudrock__5 小时前
前后端传输文件（图片）
vue·.net
王小二(海阔天空)21 小时前
个人文章合集 - 前端相关
前端·css·vue·jquery
osnet1 天前
showdoc二次开发
node.js·vue
前端张三3 天前
view deign 和 vue2 合并单元格的方法
vue
-心铭-3 天前
有关若依菜单管理的改造
学习·vue
Snailmi3 天前
Spring Boot+VUE《班级综合测评管理系统》
java·spring boot·后端·vue·毕业设计
潜心专研的小张同学3 天前
pnpm依赖安装失败解决|pnpm项目从一个文件夹复制到另一个文件夹运行失败问题解决-以vbenAdmin项目为例
前端·javascript·vscode·npm·vue·pnpm
夏与冰3 天前
vue3项目el-table表格行内编辑加输入框校验
vue
垂钓的小鱼13 天前
尚硅谷vue3+TypeScript笔记大全
javascript·typescript·vue
ncj3934379064 天前
vue3项目执行pnpm update后还原package.json文件后运行报错
vue
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache