CSS 模块化在 Vue 与 React 中怎么用？

CSS 模块化在 Vue 与 React 中的实践指南

在前端工程化日益发展的今天，如何高效、可维护地管理样式成为了一个不可忽视的问题，CSS 模块化作为一种解决方案，通过限制样式作用域和增强组件化思维，显著提升了样式的复用性和维护性，本文将深入探讨在 Vue 和 React 两大主流框架中如何实施 CSS 模块化,帮助开发者更好地组织和管理项目中的样式资源。

CSS 模块化概览

CSS 模块化主要解决的是全局命名空间污染和样式依赖管理两大问题，传统 CSS 文件中，选择器是全局生效的，这容易导致不同组件间的样式冲突，而模块化方法通过为每个组件生成唯一的类名，确保样式只作用于特定组件，避免了全局污染，它也使得样式的导入、导出和组合变得更加直观和灵活。

CSS 模块化在 Vue 与 React 中怎么用？

Vue 中的 CSS 模块化

Vue 框架自诞生之初就强调组件化开发，其单文件组件（.vue 文件）结构天然支持样式的模块化管理，在 Vue 中，可以通过以下几种方式实现 CSS 模块化：

Scoped CSS

在 .vue 文件的 <style> 标签上添加 scoped 属性，可以自动为该组件内的所有样式添加一个唯一的属性选择器作为前缀,从而限定样式作用域。

<template>
  <div class="example">Hello World</div>
</template>
<style scoped>
.example {
  color: red;
}
</style>

编译后，.example 类会被转换为类似 .example[data-v-f3f3eg9] 的形式,确保只作用于当前组件。

CSS Modules

虽然 scoped 属性提供了基本的样式隔离，但在需要更精细控制样式名或利用 CSS 模块化高级特性时，可以使用 CSS Modules，在 Vue CLI 或 Vite 构建的项目中，可以通过配置启用 CSS Modules，并在 <style> 标签上使用 module 属性：

<template>
  <div :class="$style.example">Hello World</div>
</template>
<style module>
.example {
  color: red;
}
</style>

这里，$style 是一个计算属性，它根据当前组件的 CSS Modules 生成的对象映射样式类名,这种方式允许直接在模板中通过动态类名绑定来使用模块化的样式。

Preprocessors 与 Modules 结合

Vue 也支持与 Sass、Less 等 CSS 预处理器结合使用 CSS Modules，只需在 <style> 标签上同时指定预处理器语言和 module 属性即可：

<style lang="scss" module>
.example {
  color: red;
  &:hover {
    color: blue;
  }
}
</style>

这样，你可以在享受预处理器带来的变量、嵌套等高级功能的同时,实现样式的模块化管理。

React 中的 CSS 模块化

React 作为一个更加灵活的库，其生态中提供了多种实现 CSS 模块化的方案，包括但不限于 CSS Modules、Styled Components、Emotion 等。

CSS Modules

在 Create React App 或自定义配置的 React 项目中，可以直接使用 CSS Modules，你需要将样式文件命名为 [name].module.css，然后在组件中通过 import styles from './Component.module.css' 的方式引入：

import React from 'react';
import styles from './Example.module.css';
function Example() {
  return <div className={styles.example}>Hello World</div>;
}

CSS Modules 会为每个类名生成一个唯一的哈希值,确保样式隔离。

Styled Components

Styled Components 是一个流行的 CSS-in-JS 库，它允许你使用 ES6 的模板字符串来定义样式，并将这些样式直接绑定到 React 组件上，这种方式不仅实现了样式的模块化，还使得样式本身成为了组件的一部分,易于复用和维护：

import styled from 'styled-components';
const StyledExample = styled.div`
  color: red;
  &:hover {
    color: blue;
  }
`;
function Example() {
  return <StyledExample>Hello World</StyledExample>;
}

Emotion

Emotion 是另一个强大的 CSS-in-JS 库，它提供了类似 Styled Components 的功能，但更加轻量级且性能优越，Emotion 支持通过 css 属性或 styled 函数来创建样式化的组件：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
const exampleStyle = css`
  color: red;
  &:hover {
    color: blue;
  }
`;
function Example() {
  return <div css={exampleStyle}>Hello World</div>;
}

或者使用 styled：

import styled from '@emotion/styled';
const StyledExample = styled.div`
  color: red;
  &:hover {
    color: blue;
  }
`;

选择策略与最佳实践

在选择 Vue 或 React 中的 CSS 模块化方案时，应考虑项目的具体需求、团队的技术栈偏好以及长期维护成本，对于 Vue 项目，如果追求简单快捷，scoped 属性是一个不错的选择；若需要更精细的控制或利用 CSS Modules 的高级特性，则可以直接采用 CSS Modules，而在 React 项目中，CSS Modules 提供了基础的模块化支持，而 Styled Components 和 Emotion 则更适合追求高度组件化和动态样式能力的场景。

无论选择哪种方案,都应遵循以下最佳实践：