css modules 对比 vue scoped

css modules 对比 vue scoped

css modules

会产生一个唯一的类名

使用过程

// code-block.module.css
.wrapper {
	display:block;
}

// b.jsx
import style from 'code-block.module.css'

function Bcomponent() {
	return <div className={style.wrapper }>123</div>
}

最终渲染

vue scoped

dom 元素的 class 不会改变，css 文件会添加当前 组件的 唯一标识进行属性选择

使用过程

<template>
	<div class="dis-i-b">123</div>
</template>

<style scoped>
.dis-i-b {
	display: inline-block
}
</style>

最终渲染

data-v-7d998834 是该组件的唯一表示

对比

个人感觉 css modules 会比 scoped 更好一点。因为 scoped 会受到 全局 css 的影响。