为什么要用css模块化？

CSS模块化是一种将CSS代码按照组件或模块进行封装的方法。使用CSS模块化有多个好处，使得样式更加可维护、可扩展，并减少样式冲突的可能性。以下是一些使用CSS模块化的好处：

1. 避免全局作用域污染： 在传统的全局CSS中，样式规则会被应用到整个应用中，容易造成样式冲突和命名冲突。使用CSS模块化可以将样式限定在特定的组件或模块中，避免全局作用域的污染。

2. 局部作用域： CSS模块化允许你在每个组件中创建局部的作用域，使得样式只在组件内部生效。这有助于隔离不同组件的样式，减少副作用和不必要的影响。

3. 可重用性： 使用CSS模块化可以使组件的样式更具有可重用性。每个组件的样式都是独立的，可以轻松地将组件移植到其他项目中而不必担心样式冲突。

4. 组件独立性： 样式模块化可以使组件更具独立性，组件的样式定义在组件自身的文件中，不会依赖于外部的全局样式文件。

5. 命名空间： CSS模块化允许使用更短、更有意义的类名或标识符，因为它们只在组件范围内生效。这可以提高代码的可读性和可维护性。

6. 防止样式冲突： 使用CSS模块化可以避免不同组件之间的样式冲突。每个组件的样式只对该组件内部生效，不会影响其他组件。

7. 更好的维护性： 样式模块化使得你可以在组件内部更容易地找到和修改样式，而不需要在全局范围中寻找和修改。

8. 性能优化： 一些CSS模块化方案会将类名哈希化，从而减小样式表的文件大小。这可以提高加载速度和性能。

总的来说，CSS模块化可以提高样式的可维护性、可扩展性和可重用性，同时减少样式冲突和全局作用域的问题。不同的CSS模块化方案，如CSS Modules、Scoped CSS、CSS-in-JS等，都可以根据项目的需求选择适合的方式。