css只在当前组件的有效方法

在前端开发中，CSS是我们最经常使用的技术之一。然而，我们有时需要将CSS的作用范围限制在当前组件内，而不是全局的范围内，这样可以避免对其他组件造成干扰。那么，有哪些方法可以实现CSS只在当前组件中起作用呢？下面就来一一介绍。

1. Scoped CSS

<style scoped>
  h1 {
    color: red;
  }
</style>

Scoped CSS是Vue.js框架中提供的一种CSS局部作用域的解决方案，它可以将CSS的作用范围限制在当前组件中。

2. CSS Modules

// app.css
.title {
  color: red;
}

// app.js
import styles from './app.css';

class App extends React.Component {
  render() {
    return <h1 className={styles.title}>Hello World!</h1>;
  }
}

CSS Modules是React框架中常用的一种CSS模块化解决方案，它可以通过给CSS类名添加唯一的哈希值，从而将CSS的作用范围限制在当前组件中。

3. BEM命名规范

// app.css
.app {
  color: red;
}

.app__title {
  font-size: 20px;
}

BEM（Block Element Modifier）命名规范是一种常用于CSS的命名规范，它可以将CSS的作用范围限制在当前组件内。将组件作为块（Block）、组件中的元素作为元素（Element），再使用Modifier来描述块或元素的特定状态。

使用上述方法都可以实现CSS只在当前组件中起作用。我们可以根据实际需求选择适合自己的解决方案。