杭州建设教育网站,国内seo公司,顺德网站建设基本流程,端点seo博客一、BEM
BEM是一种前端开发中常用的命名约定#xff0c;主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。
Block#xff08;块#xff09;#xff1a;独立的功能性页面组件#xff0c;可以是一个简单的按钮#xff0c;一个复杂的导航条…一、BEM
BEM是一种前端开发中常用的命名约定主要用于CSS和HTML的结构化和模块化。BEM是Block、Element、Modifier的缩写。
Block块独立的功能性页面组件可以是一个简单的按钮一个复杂的导航条或者任何其他独立的UI部分。块的名称是唯一的且通常是名词比如menu、button等。Element元素块的组成部分具体表现为块内部的某个部分。元素的命名是在块的名称后加上两个下划线__然后是元素的名称比如menu__item、button__icon等。Modifier修饰符用于定义块或元素的不同状态或外观。修饰符的命名是在块或元素的名称后加上两个破折号–然后是修饰符的名称比如button–large、menu__item–active等。
通过这种命名方式可以使代码具有更好的可读性和可维护性并且不同组件之间不会发生命名冲突。例如
div classmenuul classmenu__listli classmenu__item menu__item--activeHome/lili classmenu__itemAbout/li/ul
/div在这个例子中 menu 是块Block表示一个菜单。 menu__list 是元素Element表示菜单中的列表。 menu__item 是元素Element表示列表项。 menu__item - - active 是修饰符Modifier表示列表项的活动状态。 使用BEM的好处包括 可读性强通过明确的命名规则代码变得更加容易理解。 可维护性高模块化的结构使得代码更容易维护和更新。 避免命名冲突由于每个类名都包含了块的名称避免了全局命名空间的冲突。
二、sass
Syntactically Awesome Style Sheets是CSS的扩展提供了更强大的功能。使用的时候先进行安装。
pnpm i sass1、变量 定义变量使用 $变量名
$primary-color: #3498db;2、嵌套
.nav {ul {list-style: none;}li {display: inline-block;}
}3、混合Mixins 使用mixin 定义和使用混合宏 定义混合宏mixin使用 mixin 指令来定义一组样式。 包含混合宏mixin使用 include 指令来将这些样式应用到某个选择器中。
mixin border-radius($radius) {border-radius: $radius;
}
.box {include border-radius(10px);
}4、继承Extend
.button {padding: 10px;background: $primary-color;
}.primary-button {extend .button;color: white;
}5、运算
.container {width: 100% - 20px;
}6、条件语句
if $theme dark {background: black;
} else {background: white;
}7、循环
for $i from 1 to 3 {.item-#{$i} {width: 100px * $i;}
}8、插值语法 用于动态生成类名、ID或其他属性值通常通过#{$variable}的方式实现。以下是一些插值语法的常见用法
//动态生成类名
$color: red;
.text-#{$color} {color: $color;
}
这段代码生成的类名是 .text-red。
--------------------------------------
//动态生成属性值
$size: 16px;
.box {width: #{$size * 2};
}
这段代码生成的样式为 width: 32px;。
---------------------------------------
//与其他字符串结合
$prefix: btn-;
.#{$prefix}primary {background-color: blue;
}
这段代码生成的类名是 .btn-primary。
-------------------------------------------
// 在选择器中使用插值
$state: active;
.button-#{$state} {color: green;
}
这段代码生成的类名是 .button-active。这些语法使得Sass更加灵活易于管理和维护样式表。 content 相当于一个占位符也可以理解为slot插槽
#{} 用于插入任何类型的值如属性、选择器名等不特定于类。.#{} 主要用于生成类选择器确保插入的内容以.开头形成有效的类选择器。 所以如果你需要插入的内容是类名就使用.#{}如果是属性名或者其他类型的选择器则直接使用#{}。
三、使用
1、在src 目录下建立一个bem.scss 文件。
$namespcae: xm !default;
$block-sel:- !default;
$elem-sel:__ !default;
$mod-sel:-- !default;//1、定义block
mixin b($block){//如 classxm-block 即 .xm-block{}$B: #{$namespcae $block-sel $block};//命名完了以后我们初始化下.#{$B}{//相当于占位符或者插槽content;}
}
//2、定义element 如 .xm-block__inner{} 类型的。
mixin e($e){$selector: ; //符号读取到父级的类名(它代表父选择器)即 .xm-block/*#{$selector $elem-sel $e}{content;}*///但是我们一般希望编译出去不要在增加这么一个父级的类型//如 .xm-block .xm-block__inner{},这里需要跳出嵌套// 使用 at-root进行包裹,然后就变成了独立的.xm-block__inner{}。at-root{#{$selector $elem-sel $e}{content;}}
}
//3、modify
mixin m($m){$selector: ; at-root{#{$selector $mod-sel $m}{content;}}
}2、写完规则要在全局使用还需要进行配置。 在vite.config.ts 中进行配置。
css:{preprocessorOptions:{scss:{additionalData:import ./src/deom.scss;}}}3、配置完了以后就可以使用了。在App.vue中使用 注意 结构以块为单位块内的元素和修饰符要写在自己的块内。
templatedivdiv classxm-test我是块div classxm-test__inner我是元素/divdiv classxm-test--success我是修饰符/div/div/div
/template
script setup langts
import A from ./components/A.vue;
/script
style langscss
include b(test){color: red;include e(inner){color: green;}include m(success){color: orangered;}
}
/style如果不使用at-root包裹那么编译以后就会变成下面的格式
四、实战 一、使用vitevue3 构成程序框架。 二、清除默认样式 在根目录下的index.html中加入
style*{padding: 0;margin: 0;}html,body{height: 100%;overflow: hidden;}在我们的scss文件中在加入一个混合项bfc
$namespcae: xm !default;
$block-sel:- !default;
$elem-sel:__ !default;
$mod-sel:-- !default;mixin bfc{height: 100%;overflow: hidden;
}mixin b($block){$B: #{$namespcae $block-sel $block};.#{$B}{content;}
}
mixin e($e){$selector: ; at-root{#{$selector $elem-sel $e}{content;}}
}
mixin m($m){$selector: ; at-root{#{$selector $mod-sel $m}{content;}}
}然后app.vue 的style中加入
style langscss#app{include bfc;}
/style新增目录结构 Layout/index.vue 代码如下
templatediv classxm-boxdivMenu/Menu/divdiv classxm-box__rightHeader/HeaderContent/Content/div/div
/template
script setup langts
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 scoped langscss
include b(box){include bfc;display: flex;include e(right){display: flex; //默认的是一行排列flex-direction: column; //纵向排列flex: 1 //左右拉满也就是100%显示}
}
/styleLayout/Content/index.vue 代码如下
templatediv classxm-contentdiv classxm-content__items v-foritem in 100{{ item }}/div/div
/template
script setup langts
import { ref,reactive } from vue
/script
style scoped langscss
include b(content){flex: 1; //向下也拉满了overflow: auto; //自适应高度include e(items){padding: 10px;margin: 10px;border: 1px solid #ccc;border-radius: 4px;}
}
/styleLayout/Header/index.vue 代码如下
templatediv classxm-headerHeader/div
/template
script setup langts
import { ref,reactive } from vue
/script
style scoped langscss
include b(header){height:50px;border-bottom: 1px solid #ccc;
}
/styleLayout/Menu/index.vue 代码如下
templatediv classxm-menuMenu/div
/template
script setup langts
import { ref,reactive } from vue
/script
style scoped langscss
include b(menu){height: 100%;min-width: 200px;border-right: 1px solid #ccc;
}
/style
