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

文章目录

    • 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.scssmixins.scssfunction.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.mzph.cn/diannao/5831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】哈希的应用---位图

目录 1、引入 2、位图的概念 3、位图的实现 ①框架的搭建 ②设置存在 ③设置不存在 ④检查存在 ​4、位图计算出现的次数 5、完整代码 1、引入 我们可以看一道面试题 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数…

2023 广东省大学生程序设计竞赛(部分题解)

目录 A - Programming Contest B - Base Station Construction C - Trading D - New Houses E - New but Nostalgic Problem I - Path Planning K - Peg Solitaire A - Programming Contest 签到题&#xff1a;直接模拟 直接按照题目意思模拟即可&#xff0c;为了好去…

Node.js 的 fs 模块分析及其应用

fs 模块&#xff0c;作为 Node.js 平台中的一个核心组件&#xff0c;主要负责处理文件系统相关的操作。该模块提供了一系列用于文件管理的功能&#xff0c;例如文件的读取、写入、更新以及删除等。 应用场景分析 fs 模块的应用范围广泛&#xff0c;下面是一些典型的使用实例&…

RCD吸收电路:开关电源高频干扰的有效消除器

开关电源中除了我们常规介绍的差模噪声源和共模噪声源&#xff0c;还存在一些其它的噪声源也应该解决&#xff0c;这些高频噪声源同样会带来电磁兼容问题&#xff0c;因此我们需要关注。这里介绍两种干扰源&#xff0c;一种是MOS管的通断带来的高频振荡噪声&#xff0c;另一种是…

web安全---CSRF漏洞/OWASP-CSRFTester的使用

what 跨站请求伪造 Cross Site Request Forgery how 攻击者诱骗点击恶意网页&#xff0c;盗用&#xff08;伪造&#xff09;受害者的身份&#xff0c;以受害者的名义向服务器发送恶意请求,而这种恶意请求在服务端看起来是正常请求 CSRF&&XSS区别 他们最本质区别就…

「笔试刷题」:数组中的最长连续子序列

一、题目 描述 给定无序数组arr&#xff0c;返回其中最长的连续序列的长度(要求值连续&#xff0c;位置可以不连续,例如 3,4,5,6为连续的自然数&#xff09; 数据范围&#xff1a;1≤n≤10^5&#xff0c;数组中的值满足 1≤val≤10^8 要求&#xff1a;空间复杂度 O(n)&#…

十大排序算法之->插入排序

一、插入排序 插入排序的基本思想是将一个记录插入到已经排好序的有序表中&#xff0c;从而形成一个新的、记录数增1的有序表。 排序过程&#xff1a; 1、外层循环&#xff1a;从第二个元素开始&#xff0c;依次选取未排序的元素。 2、内层循环&#xff1a;将当前选取的元素…

数据库(MySQL)基础:函数

函数&#xff1a;是指一段可以直接被另一段程序调用的程序或代码。 1.字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的几个如下&#xff1a; 函数功能concat(S1,S2,...Sn)字符串拼接&#xff0c;将S1,S2,...Sn拼接成一个字符串lower(str)将字符串str全部转为小写…

C++成员初始化列表

我们在类的构造函数中使用成员初始化列表可以带来效率上的提升&#xff0c;那么成员初始化列表在编译后会发生什么就是这篇文章要探究的问题 文章目录 引入成员初始化列表用成员初始化列表优化上面的代码成员初始化列表展开成员初始化列表的潜在危险 参考资料 引入 考虑下面这…

IGM焊接机器人RTE 495伺服电机维修详情一览

在当今科技迅速发展的时代&#xff0c;机器人已成为各行各业不可或缺的重要工具。IGM机器人便是其中之一&#xff0c;其工业机械手伺服马达作为机器人的关键部件&#xff0c;确保机器人能够高效、稳定地运行。当出现IGM焊接机器人RTE 495伺服电机故障问题时&#xff0c;及时进行…

Kafka介绍、安装以及操作

Kafka消息中间件 1.Kafka介绍 1.1 What is Kafka&#xff1f; 官网&#xff1a; https://kafka.apache.org/超过 80% 的财富 100 强公司信任并使用 Kafka &#xff1b;Apache Kafka 是一个开源分布式事件流平台&#xff0c;被数千家公司用于高性能数据管道、流分析、数据集成…

【校招】校园招聘中的签约环节,面完HR后的流程(意向书,offer选择与三方协议)

【校招】校园招聘中的签约环节&#xff0c;面完HR后的流程&#xff08;意向书&#xff0c;offer选择与三方协议&#xff09; 文章目录 一、面完HR后的流程1、口头oc、谈薪&#xff08;两个电话&#xff09;2、邮件意向书、带薪offer&#xff08;两封邮件&#xff09;3、签三方&…

Spring Clound介绍

Spring Cloud 是一系列框架的集合&#xff0c;它利用 Spring Boot 的开发便利性简化了分布式系统&#xff08;例如配置管理、服务发现、断路器、智能路由、微代理、控制总线、一次性令牌、全局锁、领导选举、分布式会话和集群状态&#xff09;的开发。Spring Cloud 旨在为开发者…

JavaScript调用对象内部属性和方法的语法

在JavaScript中&#xff0c;我们可以通过以下几种方式来调用对象内部的属性和方法&#xff1a; 使用点符号&#xff08;.&#xff09;来访问对象的属性和方法。例如&#xff1a; var obj {name: John,age: 30,sayHello: function() {console.log(Hello!);} };console.log(ob…

axios.get请求 重复键问题??

封装的接口方法&#xff1a; 数据&#xff1a; 多选框多选后 能得到对应的数组 但是请求的载荷却是这样的,导致会请求不到数据 departmentChecks 的格式看起来是一个数组&#xff0c;但是通常 HTTP 请求的查询参数不支持使用相同的键&#xff08;key&#xff09;名多次。如…

【WEEK9】Learning Objectives and Summaries【Spring Boot】【English Version】

Learning Objectives: Learning SpringBoot Learning Content: Reference video tutorials【狂神说Java】SpringBoot最新教程IDEA版通俗易懂YAML configuration injectionJSR303 data validationMulti-environment switchingAuto Configuration PrincipleWeb development to …

Ubuntu 4G模块域名ping不通

Ubuntu 4G模块域名ping不通 1. 问题2. 解决办法 1. 问题 Ubuntu 用4G模块上网&#xff0c;ping ip可以&#xff0c;但是 域名 ping 不通 查了网络和DNS解析配置都没问题 2. 解决办法 关闭调制解调管理器 stop systemctl stop ModemManager stop systemctl disable ModemMana…

职场商务口才培训沙龙(3篇)

职场商务口才培训沙龙&#xff08;3篇&#xff09; 职场商务口才培训沙龙是一个为职场人士提供交流、学习和提升商务口才能力的平台。以下是关于职场商务口才培训沙龙的三篇内容概述&#xff1a; **篇&#xff1a;基础沟通与表达技巧沙龙 主题&#xff1a;构建有效的商务沟通…

汇编语言-adc、sbb以及cmp指令

adc指令&#xff1a; adc 是带进位加法指令&#xff0c;它利用了CF位上记录的进位值 指令格式&#xff1a; adc 操作对象1,操作对象2 功能&#xff1a; 操作对象1 操作对象1 操作对象2 CF 例如指令 adc ax,bx 实现的功能是: (ax)(ax)(bx)CF 例如&#xff1a; mov ax,2 …

带宽的理解-笔记

带宽的理解 带宽(频带宽度)&#xff1a;是指电磁波最高频率和最低频率的差值&#xff0c;这一段频率被称为带宽。 举例说明 人耳能听到的频率范围是20赫兹到2万赫兹。换句话说&#xff0c;人而只对20赫兹至2万赫兹的声音频率有反应&#xff0c;超出或低于这一频率范围的声音我…