现代Web开发中的CSS离完美还差得远,这并不奇怪。现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突: 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 。
为了减轻CSS存在的主要痛点,我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。
对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、 Styled Componetns 、 Glamorous 或 JSS 。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣,你可以查看这篇文章: @Indrek Lasn 详细介绍了 CSS in JS的全部思想 。
使用Vue-cli构建的Vue应用程序提供了两个很棒的内置解决方案: 作用域CSS 和 CSS 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>
内容版权声明:除非注明,否则皆为本站原创文章。