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}