Cascading Style Sheets CSS (Cascading Style Sheets) is a Style sheet language that has no concept of scope. Introduction is global, but whether a Style works depends on a number of factors, such as:

  • How important
  • priority
  • Style loading order

Therefore, when we use it in the page, we may encounter the situation that the styles of components affect each other, especially when we introduce multiple component libraries or class names that are not standardized. In order to avoid style conflicts, we need to isolate the styles. I will introduce several solutions below:

Add a specific prefix to the class name

In general, we use a specific prefix inside components to avoid style conflicts between components. For example, styles inside components of ANTD use the Ant – prefix, and styles inside components of Element-UI use the el- prefix. Since the functionality of native CSS is too weak, we usually use CSS preprocessing frameworks such as LESS, SASS, etc. For this we can also use a similar feature.

For less

// button.less
@name: v-;

.@{name}button {
  background-color: green;
}

/ / compile
// .v-button {
// background-color: green;
// }
Copy the code

Rewrite the prefix

@import 'button.less';
@name: k-;

/ / compile
// .k-button {
// background-color: green;
// }
Copy the code

The sass

The current version of SASS supports writing similar to less, but the SASS team discouragesthe continued use of the @import rule. And plan to phase it out over the next few years. As an alternative, they recommend the @use rule. Please refer to sass-lang.com/documentati… .

/* button.scss */
$name: v-;

@mixin configure($name: $name) {
  @if $name {
    $name: $name !global;
  }
}

@mixin styles {
  .#{$name}button {
    background-color: green; }}Copy the code

Rewrite the prefix

@use './button.scss';

@include button.configure(
  $name: k-,
);

@include button.styles;

Copy the code

CSS in JS

Css-in-js is about writing your application’s CSS styles in a JavaScript file, so you can use JavaScript language features such as module declarations, variable definitions, function calls, and conditional judgments to provide flexible and extensible style definitions. CIJ is not yet a true standard, but different implementations are getting closer in terms of interface API design, functionality, or user experience, One of the most popular solutions is styled- Components (styled- Components themselves are designed for React and can be replaced with ue- Styled – Components), which removes the mapping between components and styles. This means that when you define your style, you’re actually creating a normal React component that attaches your style. And generate unique class names for your styles. Css-in-js is less commonly used in VUE, which itself provides a similar solution to the component-isolation style, but in React, it’s a good solution.

// The Button from the last section without the interpolations
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; Padding: 0.25 em 1 em; border: 2px solid palevioletred; border-radius: 3px; `;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
Copy the code

Scoped CSS

In VUE, there is the concept of Scoped CSS. When a label has a Scoped attribute, its CSS only applies to the elements in the current component. This is similar to style encapsulation in Shadow DOM. Make the component’s style apply only to the component by adding data properties to the component and then using the property selector in style. It implements the following transformations using PostCSS:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>
Copy the code

Conversion results

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
Copy the code

Details refer to VUE-loader.vuejs.org/zh/guide/sc…

CSS Modules

CSS Modules is a popular system for modularizing and combining CSS.

VUE 3 natively supports CSS Modules by adding the Module feature to your 

<template>
  <p :class="$style.red">
    This should be red
  </p>
  <p :class="$style.red">
    This should be red
  </p>
  <p :class="$style.bold">
    This should be bold
  </p>
</template>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>
Copy the code

Conversion results

<template>
  <p class="_red_1cpg3_4">
    This should be red
  </p>
  <p class="_red_1cpg3_4">
    This should be red
  </p>
  <p class="_bold_1cpg3_7">
    This should be bold
  </p>
</template>

<style>
._red_1cpg3_4 {
  color: red;
}
._bold_1cpg3_7 {
  font-weight: bold;
}
</style>
Copy the code

The use of shadow DOM

Unlike VUE and React, the Web provides a standard component model called Web Components that encapsulates standard elements, styles, and behavior and isolates it from the rest of the code on the page, ensuring that different parts don’t get mixed up. For example, use Web Components to create a button

customElements.define('my-button'.class extends HTMLElement {
    constructor() {
      super(a);const shadow = this.attachShadow({
        mode: 'open'
      });

      const wrapper = document.createElement('button');
      wrapper.innerText = 'Button';
      const style = document.createElement('style');
      style.textContent = ` button { color: #0B8BF4; border-radius: 4px; } `; shadow.appendChild(style); shadow.appendChild(wrapper); }});Copy the code