Whats the best practice to use styles in vue components?
In Vue when we use a scoped attribute with style tag, then the CSS will apply only to the current components.
As you declared the margin in the *{} and it is not working because of the same thing of using the scoped attribute with the style tag.
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
You can use !important with the margin property in *{}.
Vue.js 2 - Remove initial margin from body tag
You can also go through this link: https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/
As you don't know from where body's margin-bottom is applying, like in below example I intentionally added margin-bottom to body and applied your styles too.
.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>Now I Included !important to apply my css style forcefully and it worked.
.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>If the margin is injected automatically, you check the app in all browsers. Because some browsers inject margin bottom automatically.
You can prevent it by adding, {margin-bottom: 0 !important} to that component
or
#app {height: 100vh}