In team development, we need to formulate css naming conventions, and the BEM specification is one of the css naming conventions. Our project was developed with vue3, and I didn't find the BEM framework that I wanted on the Internet, so I wrote one myself, then I will introduce vue3-bem to you.
Installation
npm i vue3-bem
Using
vue3-bem is also very easy to use. As shown below.
// .vue
import useBem from "vue3-bem";
const bem = useBem("block");
<div :class="bem('elem', 'selected')"></div>
.block {
&__elem {
&--selected {
}
}
}
Api
Use useBem to set the block.
Use bem to configure elements and modfiers to return classes.
type BemFunction = function (
e?: string | null,
m?: string | string[] | { [key in string]: boolean }
) => string[];
function useBem(block: string) => BemFunction;
bem: BemFunction
Tools
If you think it's too much trouble to write import for each component, you can use the plugin vite-plugin-vue3-bem so you don't need to write import vue3-bem.
Use vite-plugin-vue3-bem can help you remove import.
// .vue
<template>
<div :class="bem('elem', 'selected')"></div>
</template>
<script lang="ts" bem-block="tip">
// do some thing
</script>
<style lang="less">
.tip {
&__elem {
&--selected {
}
}
}
</style>
// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";
plugins:[
ViteVue3Bem()
]
Type Declaration
Type declaration is required in typescript to prevent error reporting.
// env.d.ts
import "vue3-bem";
Example
Custom block name
<div class="tip">
<div :class="bem("wrap")"></div>
</div>
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
.tip {
&__wrap {
}
}
Inline modfiers
<div :class="bem('container')">
<div :class="bem("header")"></div>
<div :class="bem('item', ["selected", "highlighted"])"></div>
</div>
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
.tip {
&__header {
}
&__item {
&--selected {
}
&--highlighted {
}
}
}
Conditional modfiers
<div :class="bem('container')">
<div :class="bem("header")"></div>
<div :class="bem('item', {"selected": true, "highlighted": highlighted})"></div>
</div>
<script>
import useBem from "./useBem";
const bem = useBem('tip');
const highlighted = ref(false);
</script>
.tip {
&__header {
}
&__item {
&--selected {
}
&--highlighted {
}
}
}
Give a star if you think it will help you.
github: vue3-bem
Top comments (0)