10

How to elegantly use BEM in vue3

 3 years ago
source link: https://dev.to/kesion/how-to-elegantly-use-bem-in-vue3-91k
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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");

<div :class="bem('elem', 'selected')"></div>

.block {
  &__elem {
    &--selected {
    }
  }
}

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK