How to correctly use "scoped " styles in VueJS single file components?

In Vue.js, Single File Components (SFC) allow developers to write templates, scripts, and styles within the same file. Using 'scoped' styles is a method to encapsulate and scope CSS within Vue components, ensuring that the styles do not affect other components.

Using 'scoped' Styles: Steps

1. Adding the scoped Attribute to the <style> Tag: Adding the scoped attribute to the <style> tag in a Single File Component ensures that CSS styles are applied only to the current component. During compilation, Vue.js automatically adds a unique attribute, such as data-v-f3f3eg9, to the component's elements and CSS rules to isolate styles.

   vue
   <template>
     <button class="my-button">Click me</button>
   </template>
   
   <script>
   export default {
     name: 'MyComponent'
   }
   </script>
   
   <style scoped>
   .my-button {
     background-color: blue;
     color: white;
   }
   </style>

2. Understanding the Limitations of 'scoped' Styles: When using the scoped attribute, styles are restricted to the current component. This means child components do not inherit these styles. If you need to apply parent component styles to child components, you can use deep selectors (>>> or /deep/) to target child components.

   vue
   <style scoped>
   .my-button >>> .icon {
     color: red;
   }
   </style>

3. Effectively Utilizing CSS Modules: For more flexible style encapsulation and reuse, consider using CSS Modules, which allow CSS classes to be imported into JavaScript as modules. In CSS Modules, class names are by default scoped locally, but can be shared between components through exports and imports.

   vue
   <style module>
   .button {
     background-color: green;
   }
   </style>
   
   <template>
     <button :class="$style.button">Click me</button>
   </template>

Example and Practical Application:

Suppose we are developing a user interface library that includes a button component. We want the button's styles to be independent of other components in the application to avoid style conflicts. By adding scoped to the <style> tag, we can ensure that the button's styles are applied only to itself:

vue
<template>
  <button class="unique-button">Unique Button</button>
</template>

<style scoped>
.unique-button {
  background-color: coral;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

In this example, the .unique-button class styles are applied only to the current component and do not affect other components with the same class name.

In summary, using 'scoped' styles effectively helps maintain the independence and clarity of component styles, making it suitable for scenarios requiring style encapsulation. When designing component libraries or large projects, this technique is highly valuable.