南乐网站建设价格推广型网站建设模板
视频
总结：
- BEM架构：一个命名类的规范而已，说白了就是如何给类起名字
- 使用sass的目的：在
<style>中模块化的使用类名，同时减少代码数量
1、 BEM架构
（通义灵码查询结果）
BEM (Block Element Modifier) 架构是一种广泛使用的 CSS 命名方法论，它帮助开发者组织和编写可维护的 CSS 代码。下面是 BEM 的几个关键概念：
1. Block (块)
表示页面上的独立组件或区域，具有自己的 HTML 结构、样式和行为。
Block 名称通常只包含小写字母和数字，并且用连字符 - 分隔多个单词。
示例: .header, .navigation-menu
2. Element (元素)
是 Block 内部的一部分，直接与 Block 关联。
Element 名称以 Block 名称作为前缀，并通过两个连字符 __ 与 Block 名称相连。
示例: .header__logo, .navigation-menu__item
3. Modifier (修饰符)
用于改变 Block 或 Element 的外观或行为。
Modifier 名称以 Block 或 Element 名称作为前缀，并通过一个连字符 – 与 Block 或 Element 名称相连。
示例: .header–fixed, .navigation-menu__item–active
4. 使用示例
假设有一个简单的导航菜单，我们可以这样使用 BEM:
<div class="navigation-menu"><ul class="navigation-menu__list"><li class="navigation-menu__item navigation-menu__item--active"><a href="#">Home</a></li><li class="navigation-menu__item"><a href="#">About</a></li><li class="navigation-menu__item"><a href="#">Contact</a></li></ul>
</div>
对应的 CSS 如下所示:
.navigation-menu {/* 基础样式 */
}.navigation-menu__list {/* 列表样式 */
}.navigation-menu__item {/* 列表项基础样式 */
}.navigation-menu__item--active {/* 当列表项处于激活状态时的样式 */
}
5. 优点
- 可维护性: BEM 提供了一种清晰的方式来组织 CSS 选择器，使得代码更容易理解和维护。
- 可复用性: Block 和 Element 的命名方式使得样式易于复用。
- 可扩展性: Modifier 允许在不更改 HTML 结构的情况下改变样式。
2 在 Vue 中的应用
在 Vue 项目中，你可以利用 BEM 方法来组织组件的样式。例如，在 Vue 单文件组件 (SFC) 中，你可以将样式写在 <style> 标签内，并使用 BEM 命名约定。
为什么使用sass？
通过sass语法可以简单的实现选择器的拼接
- 在src文件夹中创建sass文件
// $:定义变量
$namespace: "xm" !default; //default：如果namespcae没有赋值，则默认值为xm
$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;// 作用：生成<div class="xm-block">里面的“xm-block”字符串
// @mixin:混入，类似于function(){}
@mixin b($b) {// $B:变量$B: #{$namespace + $block-sel + $b};// #{}:插值语法，用于选择器或者属性名// .#{$B} ----> .xm-block.#{$B} {@content // 内容块;;}
}// 作用：生成<div class="xm-block__el">里面的“xm-block__el”字符串
@mixin e($el) {$selector: &; // &: 父选择器，此处变量$selector的值等于父选择器名// @at-root：其中的内容从文档的根部，不使用正常的选择器嵌套/* 示例：如果不添加@at-root,则生成：.xm-block .xm-block__el{...}这里只需要：.xm-block__el{...} */@at-root {#{$selector + $element-sel + $el} {@content;}}
}// 作用：生成<div class="xm-block--m">里面的“xm-block--m”字符串
@mixin m($m) {$selector: &; @at-root {#{$selector + $modifier-sel + $m} {@content;}}}
3 scss文件引入为全局样式
- 在vite.config.js文件中添加以下配置
// 配置css相关的的选项css:{// 指定预处理器的选项preprocessorOptions:{// sass预处理器的配置scss:{// 在所有的scss文件开头自动导入该文件additionalData: `@import "@/bem.scss";`}}}
4 在Vue组件中使用
<template><div class="xm-block"><div class="xm-block__element"><div class="xm-block--modifier"></div></div></div>
</template><script setup></script>
<style lang="scss">
@include b("block") {width: 200px;height: 200px;background-color: red;@include e("element") {width: 100px;height: 100px;background-color: blue;};@include m("modifier") {width: 50px;height: 50px;background-color: green;}}
</style>- 结果
5 scss代码编译后的源码
6 组件中如何区分b、e、m
- 在组件中最外层的是block
- 组件中的元素就是element（元素包括子组件）
- 类名的作用只是用于修饰，就是个modifier
- 子组件，递归参考第一条