Vue中的作用域CSS和CSS模块的差异

现代Web开发中的CSS离完美还差得远,这并不奇怪。现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突:样式相互覆盖隐式地级联到我们未考虑到的元素

为了减轻CSS存在的主要痛点,我们在项目中普遍采用BEM的方法来。不过这只能解决CSS问题中的一小部分。

对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过CSS ModulesStyled ComponetnsGlamorousJSS。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣,你可以查看这篇文章:@Indrek Lasn详细介绍了CSS in JS的全部思想

使用Vue-cli构建的Vue应用程序提供了两个很棒的内置解决方案:作用域CSSCSS Modules。它们都有一些优点和缺点,所以让我们仔细看看哪种解决方案更适合你。

作用域CSS

在Vue中引入了CSS作用域scoped这个概念,scoped的设计思想就是让当前组件的样式不会影响到其他地方的样式,编译出来的选择器将会带上data-v-hash的方式来应用到对应的组件中,这样一来,CSS也不需要添加额外的选择器。也将解决CSS中选择器作用域和选择器权重的问题。

在Vue中,为了让作用域样式工作,只需要在<style>标签添加scoped属性:

<!-- Button.vue -->
<template>
    <button class="btn">
        <slot></slot>
    </button>
</template>

<style scoped>
    .btn {
        color: red;
    }
</style>

通过使用PostCSS并将上面的示例转换为以下内容,它仅将我们的样式应用于相同的组件中的元素:

就像你看到的一样,整个过程不需要做什么就可以达到很好的效果:作用域样式 (CSS中一直以来令人头痛的问题之一)。

现在假设你需要调整Button组件的宽度,你可以像平常使用一样,在调用这个组件的地方添加一个额外的class来设置其样式:

<!-- App.vue -->
<template>
    <div id="app">
        <Button class="btn-lg">click</Button>
    </div>
</template>

<script>
    import Button from "./components/Button";

    export default {
        name: "App",
        components: {
            Button
        }
    };
</script>

<style scoped>
    .btn-lg {
        padding: 10px 30px;
    }
</style>

转换后就像下面这样:

这次还是一样,不需要做什么就可以很好的控制样式。

不过请注意:这个特性存在一个缺陷,即如果你子组件的元素上有一个类已经在这个父组件中定义过了,那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。比如下面这个示例:

<!-- Button.vue -->
<template>
    <button class="btn btn-lg">
        <slot></slot>
    </button>
</template>

<style scoped>
.btn {
    color: red;
}
.btn-lg {
    padding: 10px 20px;
    border: 2px solid red;
}
</style>

<!-- App.vue -->
<template>
    <div id="app">
        <Button class="btn-lg">click</Button>
    &
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/scoped-styles-vs-css-modules.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部