在 vue 组件中使用样式的最佳实践是啥？
Posted
技术标签:
【中文标题】在 vue 组件中使用样式的最佳实践是啥？【英文标题】：Whats the best practice to use styles in vue components?在 vue 组件中使用样式的最佳实践是什么？ 【发布时间】：2020-10-11 18:31:31 【问题描述】：我正在使用 vue cli 创建项目，但我的样式出现“错误”
我只是测试一个有 3 行 20vh 50vh 30vh 的组件
<template>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</template>
<style scoped>
.gridContact display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;
.one grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh;
.two grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;
.three grid-area: three; background: coral; box-sizing: border-box; height: 30vh;
</style>
还有我的 app.vue
*padding: 0; margin: 0; box-sizing: border-box;
我得到了这种风格（需要的风格）
但是如果我刷新页面，我得到了这个破坏样式的空白，然后如果再次重新加载它看起来不错，然后如果我刷新我得到相同的空白，为什么？
在开发者工具上检查这个行为我看到这个属性注入了，当然那个边距不是我插入的，我认为这是在 vue 中做出的行为，也许是作用域属性？但为什么呢？干什么用的？如何解决？
【问题讨论】：
您是否使用过开发工具来查看填充该空间的内容？ 当然，它说的是 html，但正如您在代码中看到的那样，我不明白为什么会发生这种情况@Daniel_Knights 我也不明白为什么。尝试在gridContact 上使用height: 100vh，然后在孩子身上使用百分比
是的，我也知道，但我认为这是一个 vue 的“错误”，因为我用 vanilla html 做了同样的练习，而那个“错误”没有显示出来，我很想解决这个问题，但我真的想要要知道vue中的真正解释。感谢您的帮助
这是因为 vue 应用程序中包含的样式实际上仅适用于应用程序，而不是整个页面。因此，您的“*”规则不适用于页面的正文（至少这是我的猜测）
【参考方案1】：
你不知道 body 的 margin-bottom 是从哪里应用的，就像下面的例子一样，我故意将 margin-bottom 添加到 body 并应用了你的样式。
.gridContact display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;
.one grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh;
.two grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;
.three grid-area: three; background: coral; box-sizing: border-box; height: 30vh;
body
margin-bottom:50px;
*padding: 0px; margin: 0px; box-sizing: border-box;<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>现在我添加了 !important 来强制应用我的 css 样式并且它起作用了。
.gridContact display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;
.one grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh;
.two grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;
.three grid-area: three; background: coral; box-sizing: border-box; height: 30vh;
body
margin-bottom:50px;
*padding: 0px !important; margin: 0px !important; box-sizing: border-box;<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>【讨论】：
你好，我也这样做了，你知道吗？如果多次刷新页面（f5），margin又回来了，这可能是vue错误吗？ 多次表示缓存问题，如果按ctrl+f5，每次都会得到相同的结果。 我删除了缓存，现在我尝试创建一个新项目【参考方案2】：在 Vue 中，当我们使用带有样式标签的作用域属性时，CSS 将仅适用于当前组件。
当您在 * 中声明边距时，它无法正常工作，因为将 scoped 属性与样式标签一起使用是一样的。
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
您可以将 !important 与 * 中的边距属性一起使用。
Vue.js 2 - Remove initial margin from body tag
你也可以通过这个链接： https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/
【讨论】：
你好，我也这样做了，你知道吗？如果多次刷新页面（f5），margin又回来了，这可能是vue错误吗？【参考方案3】：如果边距是自动注入的，则在所有浏览器中检查应用程序。 因为有些浏览器会自动注入底部边距。
您可以通过添加来防止它， margin-bottom: 0 !important 到那个组件
或
#app 高度：100vh
【讨论】：
我添加了该样式属性并仍然注入边距，对于应用程序高度，我只想将该高度添加到某些组件，而不是整个应用程序以上是关于在 vue 组件中使用样式的最佳实践是啥？的主要内容，如果未能解决你的问题，请参考以下文章
Android：在 Activity 中声明 View 组件的最佳实践是啥？ [关闭]