The importance of scoped CSS in Vue.js

Alex Jover Morales

Alex Jover Morales

May 7, 2019
2 min read
Share on Twitter or LinkedIn

Sometimes I see new devs coming to Vue.js getting confused about scoped CSS in Vue.js. Some using it without really knowing how does it work.

If you are there, I hope this tip helps you understand why and when to use them (and when not) 😉.

I'm not going to dive deep into the theory as you have it already in the vue-loader docs. Just to know, it's a vue-loader's feature to avoid style collisions and encapsulate styles by emulating Shadow DOM functionality.

Let's better see an example of a problematic situation when you don't use scoped CSS.

Imagine we have a BaseList.vue component with the following structure:

<template>
  <ul class="list">
    <li class="list-item" v-for="item in items" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

Then create two components with the same code. Call them RedList.vue and BlueList.vue:

<template>
  <BaseList :items="items" />
</template>

<script>
import BaseList from "./BaseList";

export default {
  props: ["items"],
  components: {
    BaseList
  }
};
</script>

Now add two different styles to each of them, according to the colors. For instance, for BlueList.vue:

<style>
.list-item {
  color: white;
  background: #42a5f5;
}
</style>

Put them together like I did in this CodeSandbox, and... surprise! You'll see that even though both components have a different color defined, they show the same color:

That's because when we don't use scoped CSS, they're global, even though they are in different components. So, in this case one of the styles is overriding the other.

That's why scoped CSS are that important: they avoid these collisions to happen out of the box.

Here's the joke: if you try to put the scoped word into the style tag in the example above, you'll see that the styles of the list item won't apply 😅.

But that's normal, next week you'll see how to style inner elements when using scoped CSS, so stay tuned!

To end up, I want to mention that you can mix scoped (thus local) styles with global styles (not scoped). You want to use global styles in these situations:

  • When applying cross-component styles (utility styles).
  • When writing a third party library. If you apply scoped CSS, you'd be making your library impossible to customise styles.

Keep in mind scoped CSS is not the only solution. You might be comfortable as well using CSS modules or methodologies such as BEM.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Creating UI components based on a Design System in Vue.js

Don't you know the benefits of using a Design System? Not sure how to structure your Vue.js components in an app? Read the article and find it out.

Alex Jover Morales

Alex Jover Morales

Jul 21, 2020

How to structure a Vue.js app using Atomic Design and TailwindCSS

Unsure about how to organize your Vue.js components? Learn in this tutorial how to do it using Atomic Design methodology. Examples and demos included!

Alba Silvente

Alba Silvente

Jun 16, 2020

Theming using CSS Custom Properties in Vue.js Components

Learn in this article how to theme your applications and components by leveraging the power of CSS Custom Properties in your Vue.js components

César Alberca

César Alberca

Nov 5, 2019

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner