我应该使用 ng-if 作为 CSS 属性选择器编写 CSS 吗?

Question

考虑到Angular的最佳实践，我想知道我们是否应该使用ng-if作为CSS属性选择器。

请在下面找到HTML和CSS代码以供参考。

HTML：

<span ng-class="{'has__hardcoded-value' : user.isManualEdit}">
    {{user.totalScore}}
    <span ng-if="user.isManualEdit" class="alert-default">*</span>
</span>

.CSS

span.has__hardcoded-value {
    position: relative;
}
span.has__hardcoded-value > [ng-if="user.isManualEdit"] {
    position: absolute;
    right: -7px;
    top: -7px;
}

任何意见将不胜感激。

提前致谢:)

Answer 1

不，不要这样做。

在CSS中使用Angular特定的属性将您的设计/布局耦合到Angular。如果不改变 CSS，你就无法更改 JavaScript 框架。如果不更改CSS，您甚至无法升级到Angular 2+，因为不再有ng-if属性。此外，您必须在视图中的逻辑发生更改时更新 CSS。这种耦合是不好的，应该避免。

请改用元素、类和 ID 的选择器。

Answer 2

有很多原因。我会选择一个相当实用的。

您有三件独立的事情：

• 样式 CSS
• 结构式网页
• 代码 JS

您希望它们尽可能分开，以便您可以修改一个，而不会有搞砸另一个的危险。

执行此操作时：

span.has__hardcoded-value > [ng-if="user.isManualEdit"] {

你基本上在结构和代码上创建样式定义的依赖关系。现在，如果你想，例如将ng-if更改为ng-show/hide，或者如果你想重构代码以使用不同的变量名称，你的样式定义也必须改变。

现在一切都到了代码的目的。如果你只是在做一个扔掉的原型，你会在晚上扔掉 - 谁在乎你怎么做。如果你做某件事的时间更长，那必须保持，那么遵循 https://en.wikipedia.org/wiki/Separation_of_concerns 方面的最佳实践