Next.js中不用CSS-in-JS与CSS Modules，如何拆分CSS及相关问题？

1. 如何处理CSS Modules的样式覆盖问题？ #

几种实用的落地方案：

• 给组件暴露自定义类名属性：在Button这类可复用组件中，允许外部传入className并合并到根元素上。示例：

// Button.jsx
import styles from './Button.module.css';

export default function Button({ className, ...props }) {
  return (
    <button className={`${styles.button} ${className}`} {...props}>
      <img className={`${styles.button__icon} button__icon`} />
      <span className={styles.button__text}>Click me!</span>
    </button>
  );
}

然后在Navigation组件中给Button传入自定义类，在Navigation.module.css中通过嵌套选择器覆盖内部元素样式：

/* Navigation.module.css */
.navigation__button .button__icon {
  width: 24px;
}

这里给内部元素同时加了全局类名button__icon，确保外部能精准选中。

• 用CSS变量实现灵活调整：在Button的默认样式中用变量定义可修改的属性，外部通过自定义类覆盖变量值：

/* Button.module.css */
.button__icon {
  width: var(--button-icon-width, 16px);
}

/* Navigation.module.css */
.navigation__button {
  --button-icon-width: 24px;
}

这种方式完全避开了选择器特异性冲突，简洁易维护。

• 受控使用:global选择器：如果只是偶尔需要覆盖局部样式，可以在父组件的CSS Modules中用:global选中子组件的全局类名：

/* Navigation.module.css */
.navigation__button :global(.button__icon) {
  width: 24px;
}

注意控制使用范围，避免引发全局样式污染。

2. 不用CSS Modules能否拆分样式表且不使用CSS-in-JS？ #

完全可以，常用方案包括：

• 按路由/组件拆分全局样式：在Next.js中，直接在页面组件或组件文件里引入全局CSS文件，框架会自动对这些样式做按需代码分割。比如在Navigation.jsx中引入styles/Navigation.css，只有当Navigation组件被渲染时，对应的样式才会加载。注意用BEM这类命名规范避免类名冲突。

• 借助CSS预处理器拆分：用Sass/Less的模块化能力，把样式拆分为多个文件（比如base/reset.css、components/Button.css、layouts/Navigation.css），在需要的地方通过@import或@use引入。Next.js原生支持Sass，配置简单，还能利用预处理器的变量、混合等特性。

• 使用原子化CSS框架（如Tailwind CSS）：Tailwind不属于CSS-in-JS，它生成静态CSS文件。你可以通过配置把组件样式封装为自定义工具类，或者用@layer指令组织样式，既实现模块化管理，又不用手写大量重复CSS。

3. 全局样式单bundle加载和组件按需加载的性能差异大吗？ #

差异取决于项目规模和使用场景：

• 小项目：如果全局样式体积很小（几千字节级别），两者差异几乎可以忽略，甚至全局加载更高效——减少了样式文件数量，降低HTTP请求开销（Next.js会自动合并样式文件）。

• 大项目：当样式总体积较大时，按需加载能显著提升首屏性能。首屏只加载当前页面/组件需要的样式，不需要的组件样式不会打包到首屏bundle中，减少了首屏加载的CSS体积，加快页面渲染速度。

• 缓存层面：全局样式文件内容稳定的话，缓存命中率更高；按需加载的样式文件粒度更细，单个组件样式变化不会影响其他文件的缓存，但如果组件频繁更新，缓存失效频率会增加。

另外，Next.js对CSS Modules的代码分割是自动完成的，无需额外配置；而全局样式如果在_app.js中引入，会被打包成一个全局bundle，在首屏加载时就会下载。

内容的提问来源于stack exchange，提问作者M.T.