为样式创建指令是否会被视为反模式答案

【问题标题】：Would creating directives for styling be considered an anti-pattern为样式创建指令是否会被视为反模式
【发布时间】：2021-10-01 03:53:55
【问题描述】：

所以我正在为我正在处理的项目创建一个项目特定的组件 UI 库。它需要特定的程式化组件，并且其中的许多元素都可以重复使用。

我注意到我在 HTML 模板文件和样式文件之间切换了很多，并重复了很多样式代码样板（类似的 CSS 属性但不同的值），我想也许我可以“angularize”我通过创建自定义指令来进行样式设置的方式，然后应用与固定 CSS 样式有关的 CSS 类（例如输入字段/按钮）或使用渲染器动态设置组件的样式以获取常用属性但具有特定组件的不同值。下面的例子

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[SetWidth]'
})
export class SetWidthDirective implements OnInit {
  @Input('SetWidth') width: number | string = 'auto';

  @Input('Units') units?: 'px' | 'rem' | 'em' | '%';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    let style = '';

    if (typeof this.width == 'string') {
      style = this.width;
    } else {
      let u = this.units || 'px';
      style = `${this.width} ${u}`;
    }

    this.renderer.setStyle(this.el, 'width', style);
  }
}

用法如下：

<div [SetWidth]="100" Units="rem">Hello World</div>

我已经为非常有用的 CSS 样式制作了这些样式，例如高度、显示、模板网格选项等。通过指令类提供的自定义，我能够简化大量重复的样式声明。

我的问题是这是否会被视为反模式或不良做法。我并不真正关心它是否是做样式的“正确”方式，而是这是否会对应用程序的性能/可用性/等产生重大影响。它肯定会改善开发人员的体验。

【问题讨论】：

这是一种反模式，因为样式总是覆盖任何 CSS。您也可以在不使用指令的情况下获得几乎相同的结果，例如[style.width.px]="100" 在您的特定情况下。

标签： css angular angular-directive

【解决方案1】：

我不认为使用指令来设置类似组件的样式是一种反模式，事实上它增加了可重用性，我认为这是一个很好的做法，但如果你只想设置宽度，那么你应该使用内置的styledirective。

也只是一个建议，您不需要为 unit 使用额外的属性，并检查 width 传递的类型和 unit 传递的类型。相反，您可以将width 属性的类型设置为字符串，仅在setStyle 函数中传递它

您也可以仅将SetWidth 属性重命名为width

【讨论】：