前端工程Bem架构及其封装

2024-02-23 07:52

本文主要是介绍前端工程Bem架构及其封装,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 简介
    • 语法
    • 在vue3项目中引用
      • sass
      • 创建bem.scss文件
      • 修改vite.config.ts
      • vue文件中使用
      • 结果

这是我学习记录的笔记,如有不正,欢迎补充

简介

首先认识一下什么是bem架构?BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

语法

在这里插入图片描述
看一下其中的class类,el-divider el-divider–horizontal m-0
这里加入一个类el-divider__inner

  • el表示namespace(命名空间)
  • -()表示block(块)
  • __()双下划线表示element(元素)
  • -- 双-号表示modidier(修饰符)

在vue3项目中引用

sass

在引用之前需要先了解一下sass
这里我就不具体讲解了,我把必要的了解说一下:

  1. 嵌套规则 (Nested Rules)
  2. 父选择器 &
  3. 变量 $
  4. @at-root
  5. 占位符#{}
  6. 定义混合指令 @mixin
  7. 引用混合样式 @include
    这些可以在官方文档中查看,我想只要学过css,入门sass也是喝喝水了。

创建bem.scss文件

这里面写我们的bem架构规则。

//注意:这里的xm是自定义的namespace
$namespace: "xm" !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;@mixin b($block) {$B: #{$namespace + $block-sel + $block};.#{$B} {//占位符,替代编写的css样式@content;}
}@mixin e($elem) {$seletor: &;$E: #{$seletor + $elem-sel + $elem};@at-root {//跳出父级作用域#{$E} {//占位符,替代编写的css样式@content;}}
}@mixin m($modifier) {$seletor: &;$M: #{$seletor + $mod-sel + $modifier};@at-root {#{$M} {//占位符,替代编写的css样式@content;} } 
}

这个文件可以直接引用到项目中,改一下命名空间就行。

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {scss: {//bem文件的位置additionalData: `@import "./src/bem.scss";`}}}
})

vue文件中使用

<template><div class="xm-test">gunala<button class="xm-test--success">成功</button></div>
</template>//标注lang = "scss"<style lang="scss">//test是b的参数,表示拿到xm-test类@include b(test){color:red;//嵌套//success是m的参数,表示拿到的是xm-test--success@include m(success){color: green;}}</style>

结果

在这里插入图片描述

这篇关于前端工程Bem架构及其封装的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/737970

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo