Angular父子组件CSS代码冗余问题的优化解决方案咨询

• 全局样式抽离复用
  把布局、文本、间距这类通用样式抽离到项目根目录的styles.css（或styles.scss）里，给类名加统一前缀（比如app-）避免冲突，父子组件直接在模板里用这些类就行，不用各自重复写相同的CSS代码。

• 用CSS变量统一管理通用属性
  在全局样式里定义CSS变量，把颜色、圆角、间距这些重复出现的值统一存起来：

  :root {
    --primary-blue: #1976d2;
    --base-radius: 4px;
    --gap-sm: 8px;
  }
  

  之后不管是父组件还是子组件的CSS，直接引用变量就行，比如border-radius: var(--base-radius);，后续要改样式值只需要修改全局变量，不用逐个组件改。

• 利用:host-context()继承父组件上下文样式
  如果子组件需要跟着父组件的主题或状态变化样式，用:host-context()选择器可以直接复用父组件的类样式。比如父组件有.dark-mode类，子组件里：

  :host-context(.dark-mode) .child-card {
    background: #2d2d2d;
    color: #fff;
  }
  

  这样子组件不用单独写一套深色模式样式，直接继承父组件的上下文状态。

• SCSS片段导入复用
  要是项目用了SCSS预处理器，把按钮、卡片这类通用组件的样式写成单独的片段文件（比如_button-base.scss，下划线表示是片段文件），然后在需要的组件SCSS里导入：

  @import '../styles/partials/_button-base.scss';
  

  这样多个组件可以共用同一段样式代码，不用复制粘贴。

• 动态类绑定复用样式
  定义好通用样式类后，用Angular的ngClass在模板里动态应用，比如：

  <div [ngClass]="{'app-flex-between': isFlex, 'app-padding-md': hasPadding}"></div>
  

  不用在每个组件里重复定义这些类，统一在全局或公共样式文件里维护。

• 封装样式指令
  把常用的样式逻辑做成指令，比如一个实现水平垂直居中的指令：

  @Directive({ selector: '[appCenter]' })
  export class CenterDirective {
    @HostBinding('style.display') display = 'flex';
    @HostBinding('style.justifyContent') justifyContent = 'center';
    @HostBinding('style.alignItems') alignItems = 'center';
  }
  

  之后不管是父组件还是子组件，只要在元素上加appCenter指令就能应用居中样式，完全不用写CSS。

内容的提问来源于stack exchange，提问作者Ayushi Haria