Whats the best practice to use styles in vue components?

user_8565599 0
Viewed 888

Im using vue cli to create a project but im having 'errors' with the styles

Im just testing a component that have 3 rows 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>

And my app.vue

*{padding: 0; margin: 0; box-sizing: border-box;}

I got this style (the style needed)

enter image description here

But if i refresh the page i got this white space that brokes the style, and then if reload sometime again it looks good, and then if i refresh i got the same white space, why?

enter image description here

Checking this behavior on the developer tools i saw this attribute injected, of course that margin its not inserted by me, i think this is a behavior made it in vue, maybe the scoped attribute?but why ? whats for? how to fix it?

enter image description here

vuejs2 vue.js css html
3 Answers

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/

user_136174970

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>

user_28156350

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}

user_126129800
Related