搭建vue3组件库: CSS架构之BEM

在Vue 3中，我们可以使用BEM（Block Element Modifier）命名方法来构建可维护和可复用的组件库。以下是一个简单的例子，展示如何在Vue 3组件中应用BEM。

首先，我们创建一个基于BEM的样式块：

/* Component.vue */
<template>
  <div class="block">
    <div class="block__element">Element</div>
    <div class="block__element block__element--modifier">Element with modifier</div>
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.block {
  /* Block-level styles */
}
 
.block__element {
  /* Element-level styles */
}
 
.block__element--modifier {
  /* Modifier styles */
}
</style>

在这个例子中，.block 是一个独立的实体，.block__element 是它的子元素，而 .block__element--modifier 是具有特定修饰功能的 .block__element 版本。通过使用 scoped 属性，我们确保样式只应用于当前组件，不会泄漏到其他组件中。这种方法使得组件的样式和行为更加内聚，易于维护和理解。