DEV Community

Kesion
Kesion

Posted on

5 3

How to elegantly use BEM in vue3

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.

vue3 bem

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");
Enter fullscreen mode Exit fullscreen mode
<div :class="bem('elem', 'selected')"></div>
Enter fullscreen mode Exit fullscreen mode
.block {
  &__elem {
    &--selected {
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";

plugins:[
    ViteVue3Bem()
]
Enter fullscreen mode Exit fullscreen mode

Type Declaration
Type declaration is required in typescript to prevent error reporting.

// env.d.ts
import "vue3-bem";
Enter fullscreen mode Exit fullscreen mode

Example

Custom block name

<div class="tip">
    <div :class="bem("wrap")"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
Enter fullscreen mode Exit fullscreen mode
.tip {
    &__wrap {
    }
}
Enter fullscreen mode Exit fullscreen mode

Inline modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  ["selected", "highlighted"])"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>
Enter fullscreen mode Exit fullscreen mode
.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Conditional modfiers

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  {"selected": true, "highlighted": highlighted})"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
<script>
    import useBem from "./useBem";
    const bem = useBem('tip');
    const highlighted = ref(false);
</script>
Enter fullscreen mode Exit fullscreen mode
.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Give a star if you think it will help you.

github: vue3-bem

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay