1. 设计目标与分层架构
1.1 将全局样式与组件样式分离
设计目标 是在大型前端项目中实现全局风格的统一与组件样式的独立性，以减少样式耦合，提升维护性。
通过定义清晰的分层，将 全局变量、设计令牌、组件样式 与 业务页面风格 分离，便于并行开发与后期迭代，降低跨团队冲突的概率。
在这一步，确保 命名规范一致、样式作用域清晰，并对主题与可访问性相关的样式需求设定基线。
1.2 统一本地变量与设计令牌入口
为了在大型项目中实现跨模块的一致性，本地变量与全局令牌入口应统一管理，便于主题切换和全局调整。
设计令牌作为颜色、字号、圆角、间距等基础值的来源，应以单一来源管理，从而避免重复定义和风格漂移。
将入口文件与加载顺序明确后，设计系统的变更可被快速传播到所有组件，提升变更的可控性。
2. CSS 工具栈的落地实操
2.1 选择与搭配：Sass、PostCSS、CSS Modules
在大型项目中，变量、混入、嵌套 的管理通常通过 Sass 等预处理器实现，搭配 PostCSS 以实现未来语法转换和自动前缀处理。
通过使用 CSS Modules 实现局部作用域，避免全局样式冲突，同时确保全局设计令牌的入口一致性，形成稳定的开发体验。
在构建流程中，集成 PostCSS 插件如 autoprefixer、postcss-preset-env，确保跨浏览器兼容性与未来 CSS 特性的平滑过渡。
{
"plugins": [
"postcss-preset-env",
"autoprefixer"
]
}
2.2 变量与设计令牌设计
设计令牌用于统一 色彩、字号、圆角、间距 的值，便于跨组件实现一致性与主题切换。
在样式层通过 CSS 自定义属性（变量） 来应用设计令牌，支持运行时切换与主题扩展。
/* 设计令牌公开入口 */
:root {
--brand-color: #2c7be5;
--radius-md: 8px;
--space-md: 16px;
}
.button { background: var(--brand-color); border-radius: var(--radius-md); padding: var(--space-md); }
{
"color": { "brand": "#2c7be5" },
"size": { "radius": { "md": "8px" }, "space": { "md": "16px" } }
}
3. BEM 方法在大型项目中的应用
3.1 BEM 命名规范与实例
BEM 将样式命名分为 Block、Element、Modifier，降低耦合、提高可维护性，尤其适合多人协作的场景。
推荐的命名格式为 block__element--modifier，在组件内部保持一致性，避免跨组件混用。
常见示例包括 card__title、card__title--large，用于表达组件内部结构和状态。
标题
内容
3.2 BEM 与组件化的结合
在组件化时代，将 BEM 与 CSS 模块/局部作用域结合，能够在保持全局设计一致性的同时实现组件级样式隔离。
实践要点包括将块 (Block) 视为组件容器，元素 (Element) 作为内部子部件，修饰符 (Modifier) 表示不同状态或变体，从而实现高效的复用。
/* Card.module.css */
.card { padding: 16px; border-radius: var(--radius-md); }
.card__title { font-size: 18px; }
.card__title--large { font-size: 22px; font-weight: bold; }
4. 设计系统与 tokens 的落地
4.1 组件库中的 tokens 与主题切换
设计系统将 设计令牌 统一成可复用的入口，便于跨产品线重复使用与一致性维护。
实现主题切换通常通过 数据属性或类名驱动，以便动态切换变量并支持深色等多主题场景。
:root {
--bg: #ffffff;
--text: #1f2937;
--card: #ffffff;
}
[data-theme="dark"] {
--bg: #0b1020;
--text: #e5e7eb;
--card: #14172a;
}
{
"tokens": {
"color": { "brand": "#2c7be5", "text": "#1f2937" },
"size": { "radius": "8px", "space": "16px" }
}
}
4.2 将设计系统令牌落地到组件库
将设计令牌映射到具体组件样式中，确保设计语言在不同页面的一致性，并通过自动化生成实现跨项目的可维护性。
落地要点包括 与前端框架绑定、代码生成与测试覆盖，以确保长期稳定性。
5. 构建、Lint 与性能优化
5.1 静态分析与样式构建
通过 stylelint 进行样式约束，确保命名、缩进、单位等风格统一，减少团队差异带来的维护成本。
在规则配置中，覆盖全局与组件样式的混用情况，避免直接硬编码颜色或尺寸造成的扩展困难。
{
"extends": "stylelint-config-standard",
"rules": {
"block-no-empty": null,
"color-no-invalid-hex": true
}
}
5.2 去除未使用的 CSS 与按需加载
在大型应用中，未使用的样式会造成额外的体积与渲染成本，因此需要通过工具实现按需提取和去重。
常见策略包括 PurgeCSS 与构建工具插件的结合，结合结构化的内容扫描来清理无用样式。
{
"content": ["./src/**/*.{html,vue,jsx,tsx}"],
"css": ["./src/**/*.css"]
}
