首先配置angular.json中的styles数组引入全局CSS，接着在styles.css中使用CSS自定义属性定义设计令牌以实现主题管理，然后通过ViewEncapsulation控制组件样式封装，默认采用Emulated模式避免样式污染，最后推荐使用SCSS结合BEM命名法编写局部样式以提升可维护性。
在Angular项目中合理引入全局CSS并实现组件样式隔离，是保证项目可维护性和视觉一致性的关键。Angular默认支持样式封装机制，但需要正确配置全局样式和理解组件视图封装模式，才能兼顾统一设计语言与组件独立性。
配置全局样式文件
Angular允许通过angular.json文件指定全局样式资源，这些样式会打包进主样式表，对所有组件生效。
打开angular.json，找到projects > [project-name] > architect > build > options中的styles数组：
添加的每个样式文件都会被编译合并到最终的styles.css中。推荐将重置样式、设计变量（如颜色、字体）、通用类（如.text-center）写入全局文件。
立即学习“前端免费学习笔记（深入）”；
使用CSS自定义属性实现主题管理
借助CSS自定义属性（CSS Variables），可以在全局文件中定义可复用的设计令牌，便于主题切换和一致性维护。
在styles.css中定义：
组件内部可通过var()函数引用：
这种方式避免了重复定义，也便于动态切换主题（例如通过JavaScript修改:root的变量值）。
理解并控制组件样式封装
Angular默认使用ViewEncapsulation.Emulated，通过属性选择器模拟样式隔离，防止组件间样式污染。
若需修改封装策略，在组件装饰器中设置：
@Component({ selector: 'app-card', encapsulation: ViewEncapsulation.None, // 或 ShadowDom ... }) 注意：使用None时组件样式将不隔离，可能影响其他组件，应谨慎使用。建议仅在创建基础UI库或覆盖第三方组件样式时采用。
局部样式优先使用SCSS与BEM命名法
为避免类名冲突，组件私有样式推荐使用SCSS组织，并采用BEM（Block Element Modifier）命名规范。
例如在card.component.scss中：
这种结构清晰表达组件内部结构，同时降低全局污染风险。
基本上就这些。合理划分全局与局部样式职责，结合CSS变量与封装机制，就能在保持一致性的同时实现良好的组件隔离。不复杂但容易忽略细节。
