【Vue3】BEM 架构和 Sass 语法

已于 2024-02-03 09:08:24 修改
阅读量1.3k 收藏 10
点赞数 2
分类专栏： Vue 及其周边生态 文章标签： sass 前端 css
于 2023-07-27 16:05:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/131962417
版权
文章介绍了BEM架构，一种用于创建可维护和可重用CSS的命名规范，包括Block、Element和Modifier的概念。同时，文章讨论了Sass的高级功能，如嵌套规则、变量、插值语句、混合和导入，以及如何利用它们提高CSS的组织和效率。通过示例展示了如何在实际项目中使用BEM和Sass编写更清晰、更易于维护的样式代码。
摘要由CSDN通过智能技术生成

1. BEM 架构

BEM（Block, Element, Modifier）是一种命名约定，用于在编写 CSS 和 HTML 类名时创建可维护和可重用的样式。BEM 是一种常用的 CSS 命名规范，它的目的是减少样式之间的耦合，增加样式的可读性，并提高样式的复用性。

BEM 的三个主要概念：

  1. Block（块）：Block 是一个独立的、可复用的组件或模块，它代表一个完整的功能单元。块是一个顶层的元素，它本身应该有意义并且可以独立存在。
  2. Element（元素）：Element 是块的组成部分，它不能单独存在，必须依赖于块。Element 是块的一部分，它只有在块的上下文中才有意义。
  3. Modifier（修饰符）：Modifier 是用于改变块或元素外观、状态或行为的标志。通过添加修饰符类名，可以修改块或元素的样式，从而实现不同的变体。

BEM 的优点：

  1. 可读性：BEM 的类名规范清晰明了，易于理解和阅读，使其他开发者更容易理解代码结构和样式的用途。
  2. 可维护性：BEM 通过将样式与组件封装在一起，降低了样式之间的耦合性，使样式更易于维护和修改。
  3. 可重用性：BEM 鼓励将样式抽象为可复用的块和元素，提高了样式的复用性，减少了重复编写样式的工作。

以element-plus中input和button元素的样式为例：

在这里插入图片描述

在这里插入图片描述

BEM 的命名约定（以element-plus为例）：

  • el：namespace（element-plus所有样式都是el开头）
  • -：block（代表块级区域）
  • __：element（连接元素内容）
  • --：modifier（修饰内容）

2. Sass 常用语法

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

scss只是sass的一个语言版本，.scss文件的特点是层级靠{}来区分，.sass文件的特点的层级靠缩进来区分

2.1. 嵌套规则 (Nested Rules)

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，避免了重复输入父选择器。

例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

2.2. 父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器。

例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a {
    font-weight: bold;
    text-decoration: none; 
}
a:hover {
	text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}

2.3. 变量 ## (Variables: ## )

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

编译为

#main {
  width: 5em;
}

2.4. 插值语句 #{} (Interpolation: #{})

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
/* 动态类名必须结合插值语句 */
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; 
}

2.5. @at-root

子级跳出父级的嵌套

例如：

.parent {
  ...
  @at-root .child { ... }
}

编译为：

.parent { ... }
.child { ... }
/* 如果没有@at-root则编译为： */
/* .parent {...} */
/* .parent .child (...) */

2.6. 定义混合指令 @mixin (Defining a Mixin: @mixin)

公共的、常用的样式使用@mixin进行封装

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

2.7. 参数 (Arguments)

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

/* 很类似于js中的函数 */
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }
/* 1in：1英寸 */

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

3. 编写BEM架构和全局Sass文件

bem.scss

$namespace: 'el' !default;
$block-sel: '-' !default;
$elem-sel: '__' !default;
$mod-sel: '--' !default;

// block
// <div class="el-block"> 定义变量生成此规则
@mixin b($block) {
  $B:#{$namespace + $block-sel + $block};
  .#{$B} {
    @content; //相当于一个占位符
  }
}

// element
// .el-block__inner{} 定义变量生成此规则
@mixin e($el) {
  $selector: &;
  @at-root {
    #{$selector + $elem-sel + $el} {
      @content;
    }
  }
}

// modifier
@mixin m($m) {
  $selector: &;
  @at-root {
    #{$selector + $mod-sel + $m} {
      @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: {
        additionalData: '@import "./src/bem.scss";',
      },
    },
  }
})

App.vue

<template>
  <div class="el-test">
    test
    <div class="el-test__inner">inner</div>
    <div class="el-test--success">modify</div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
@include b(test) {
  color: red;
  @include e(inner) {
    color: white;
  }
  @include m(success) {
    color: green;
  }
}
</style>

在这里插入图片描述

4. 小案例（Layout布局）

在这里插入图片描述

bem.scss

$namespace: 'el' !default;
$block-sel: '-' !default;
$elem-sel: '__' !default;
$mod-sel: '--' !default;

// BFC（Block Formatting Context）块格式化上下文
@mixin bfc {
  height: 100%;
  overflow: hidden;  
}

// block
// <div class="el-block"> 定义变量生成此规则
@mixin b($block) {
  $B:#{$namespace + $block-sel + $block};
  .#{$B} {
    @content; //相当于一个占位符
  }
}

// element
// .el-block__inner{} 定义变量生成此规则
@mixin e($el) {
  $selector: &;
  @at-root {
    #{$selector + $elem-sel + $el} {
      @content;
    }
  }
}

// modifier
@mixin m($m) {
  $selector: &;
  @at-root {
    #{$selector + $mod-sel + $m} {
      @content;
    }
  }
}

App.vue

<template>
  <Layout></Layout>
</template>

<script setup lang="ts">
// import { ref,reactive,onMounted } from 'vue';
import Layout from './Layout/index.vue';

</script>

<style lang="scss">
#app {
  @include bfc;
}
</style>

index.vue …\Content

<template>
  <div class="el-content">
    <div class="el-content__items" v-for="item in 100">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
// import { ref,reactive } from 'vue';
</script>

<style lang="scss" scoped>
@include b(content) {
  flex: 1;
  overflow: auto;
  @include e(items) {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}
</style>

index.vue …\Header

<template>
  <div class="el-header"> 
    Header
  </div>
</template>

<script setup lang="ts">
// import { ref,reactive } from 'vue';
</script>

<style lang="scss" scoped>
@include b(header) {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
</style>

index.vue …\Menu

<template>
  <div class="el-menu">
    Menu
  </div>
</template>

<script setup lang="ts">
// import { ref,reactive } from 'vue';
</script>

<style lang="scss" scoped>
@include b(menu) {
  min-width: 200px;
  border-right: 1px solid #ccc;
  height: 100%;

}
</style>

index.vue …\Layout

<template>
  <div class="el-box">
    <div>
      <Menu></Menu>
    </div>
    <div class="el-box__right">
      <Header></Header>
      <Content></Content>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref, reactive } from 'vue';
import Menu from './Menu/index.vue';
import Header from './Header/index.vue';
import Content from './Content/index.vue';
</script>

<style lang="scss" scoped>
@include b(box) {
  @include bfc;
  display: flex;
  @include e(right) {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
</style>

在这里插入图片描述

秀秀_heo
关注
专栏目录
跟小满老师学vue3 第十三章 BEM架构 + layout布局
molicong83的博客
04-27 533
BEM架构原理和Layout布局基础
Vue学习记录之六（组件实战及BEM框架了解）
最新发布
LvManBa的博客
09-20 922
BEM是一种前端开发中常用的命名约定，主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。通过这种命名方式，可以使代码具有更好的可读性和可维护性，并且不同组件之间不会发生命名冲突。例如：
bem架构
car_lic的博客
01-21 574
关于css bem命名规范的总结
BEM架构
YUELEI118的博客
08-19 866
1. BEM架构就是组件中类的名称的规范 、 2. 使用sass的目的：在``中模块化的使用类名，同时减少代码数量
CSS命名规范——BEM思想（非常赞的规范）
热门推荐
chenmoquan的专栏
12-03 3万+
特别声明：此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://csswizardry.com/2013/01/mindbemding-getting-you
vue3中配置bem样式架构
孙怼怼的博客
08-02 392
BEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护
vue3中应用BEM规范，使用sass函数拼接BEM类名，同时导出sass变量在js中访问
小硅壳的博客
06-29 836
在vue3中使用bem规范书写sass。定义sass函数拼接符合bem规范的类名、如何在在js中使用sass暴露的变量、将公共函数挂到vue3实例上，并在template标签内部访问、
Vue3中使用Sass详解
2301_79099480的博客
05-06 1096
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
elementUI 源码-打造自己的组件库，系列二：Sass语法 BEM实现 Css编码规范
m13837120071的博客
08-07 1106
好吧，我承认了，当第一次看到elementUI的css实现时，震惊了。css这块我一直都是很轻视的，但没想到在我眼中不重要的东西，在elementUI这里竟然变的这么精彩
企业开发团队分享，BEM 代码命名规范实践
厦门在乎科技
12-01 1239
背景 最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。 什么是 BEM 命名规范 BEM 由 Yandex 团队提出的一种前端 CSS 命名方法论。BEM 是BlockElementModifier的缩写 ，其中B表示块（block）、E表示元素（element）、M表示修饰符（modifier）。 这三个部分通常使用__与--连接。即：.块__元素--修饰符...
Vue前端开发规范具体说明
03-20
3. **模板语法**：Vue的模板语法应当简洁明了，避免过于复杂的嵌套。使用v-if/v-else/v-for指令时，注意逻辑的清晰性。尽量避免在模板中进行计算，而应在计算属性中处理。 4. **单文件组件(SFC)**：每个Vue组件应为...
维护的前端面试题库，包含不限于Vue面试题
01-09
面试可能关注盒模型、选择器优先级、布局模式（如Flexbox和Grid）、响应式设计、CSS预处理器（如Sass、Less）、CSS Modules和BEM命名法等。 7. **算法面试题**：算法能力是衡量开发者逻辑思维的重要指标。面试可能...
使用BEM开发vue组件
图解前端的博客
04-03 1682
BEM是一种css开发的思想 BEM 是什么意思 BEM 其实是block，element，modifier的缩写，它们代表css中的块，元素和修饰符(例如：元素的状态) BEM怎么使用 BEM 遵循下面的简单的规则，使用__双划线和--双划线做分割线，使用单个的 - 中划线作为你自己的样式分隔符。 BEM实例 .input-search{width:100px...
Vue3 使用sass
qq_29744347的博客
05-09 1870
文章目录安装扩展和依赖文件后缀使用sass的好处可以嵌套可以声明使用变量可以封装函数 安装扩展和依赖 npm install node-sass sass-loader --save-dev 文件后缀 文件使用scss后缀 写style时声明lang=scss <style scoped lang="scss"> # 这里写样式 </style> 使用sass的好处 可以嵌套 # 不使用sass可以这么写 .container a { color:black } # 使用
CSS架构之BEM设计模式
肥晨开发的学习之路
02-08 9359
B代表：Black（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是描述Block或Element的属性或状态，同一Block或Element可以有多个Modifier。
vue3使用sass
想好了再写！
05-23 444
vue3使用scss。
聊一聊BEM设计模式在Vue组件开发中的应用
weixin_34357267的博客
04-25 257
聊一聊BEM设计模式在Vue组件开发中的应用 回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在团队多人开发中出现css命名冲突3.在进行组件化开发时如何规范书写css 什么是BEM BEM是Yandex团队提出的一种css的命名方式，通过这种命名方式可以很好地解决上面遇到的问题，提高cs...
vue3 集成 Sass
ling_zhi_xin的博客
08-22 682
配置scss 全局变量 @import “./src/styles/variable.scss”;冒号不能少不然会报错。在src 文件夹下 创建 styles 并创建 index.scss 引入到项目。清除全局样式 reset.scss。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秀秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值