Next.js+CSS Modules全局样式拆分咨询：按Tokens/Layout/Base拆分是否可行

当然可以拆分，这种模块化的全局样式管理方式刚好适配你的技术栈，能大幅提升样式的可维护性和复用性。下面是具体的拆分方案和实现细节：

1. 拆分设计令牌（Tokens） #

创建 styles/tokens.css，专门存放通用设计系统变量，移除组件特定变量（组件变量应该放在对应组件的CSS Modules里）：

:root {
  /* 颜色系统 */
  --color-primary: #333A73;
  --color-accent: #FBA834;
  --color-bg: #F7F8FB;
  --color-text: #1E2340;

  /* 间距系统 */
  --space-md: 16px;

  /* 布局系统 */
  --container-padding: 6%;
}

这里把变量名优化得更语义化，避免模糊命名导致的维护混乱。

2. 基础全局样式（Base） #

创建 styles/base.css，存放全局基础重置、字体、文本等默认样式，依赖Tokens文件：

@import './tokens.css';

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* 全局通用元素默认样式 */
a {
  color: var(--color-primary);
  text-decoration: none;
}

h1, h2, h3 {
  font-weight: 600;
}

3. 布局样式（Layout） #

创建 styles/layout.css，存放容器、网格、间距工具类等全局布局规则，同样依赖Tokens：

@import './tokens.css';

/* 通用容器规则 */
.container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  max-width: 1200px;
  margin: 0 auto;
}

/* 布局工具类 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-y-md {
  margin-bottom: var(--space-md);
}

4. 组件样式用CSS Modules隔离 #

把原全局文件里的.btn-primary移到组件专属的CSS Modules文件中，比如 components/Button.module.css：

@import '../styles/tokens.css';

.primary {
  height: 60px;
  width: 200px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.primary:hover {
  opacity: 0.9;
}

然后在Button组件中使用：

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

export default function Button() {
  return <button className={styles.primary}>点击按钮</button>;
}

5. Next.js中全局样式的导入 #

在全局入口文件中导入Base和Layout样式：

• Pages Router：在 pages/_app.js 中导入

import '../styles/base.css';
import '../styles/layout.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

• App Router：在 app/layout.js 中导入

import '../styles/base.css';
import '../styles/layout.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

拆分后的优势 #

• 职责单一：每个文件只处理一类样式，定位问题更高效
• 设计统一：所有样式基于Tokens变量，避免硬编码导致的设计不一致
• 样式隔离：组件样式用CSS Modules，彻底解决全局类名冲突问题
• 可扩展性：后续新增设计变量或布局规则，只需修改对应文件即可

内容的提问来源于stack exchange，提问作者Alexandru Cercel