我应该使用 ng-if 作为 CSS 属性选择器来编写 CSS 吗？答案

【问题标题】：Should I write CSS using ng-if as CSS Attribute Selector?我应该使用 ng-if 作为 CSS 属性选择器来编写 CSS 吗？
【发布时间】：2017-04-12 16:33:16
【问题描述】：

考虑到 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;
}

我们将不胜感激。

提前致谢:)

【问题讨论】：

ng-if 是有角度的东西。在 CSS 中添加它可能有效，但不是最佳实践。创建独立的类并基于状态，将它们添加到元素中
我只是想知道，是什么阻止您向这些元素添加类？（类似于'alert-default cls-manual-edit'）
@KushalJayswal 因为如果有人即时删除属性，使用基于属性的选择器可能会失败。此外，ng-* 是 angular 标签，并且为从事 angular 工作的开发人员所熟知。对于设计师来说，很难理解。角度标签也用于使视图更具动态性，并且只能用于它。 @str 的答案解释了它
因为您希望页面呈现取决于您的样式定义，而不是相反。
@KushalJayswal 这些条件是您的应用业务逻辑的一部分。这应该是 JS 和/或 HTML 的一部分。但绝对不是 CSS。 CSS 应该具有像媒体查询这样的渲染逻辑。我什至反对在视图中使用太多条件。您应该创建一个函数并将此函数绑定到视图。这使代码和 HTML 保持干净，并使调试更容易。但这只是我的 POV。

标签： javascript html css angularjs css-selectors

【解决方案1】：

不，不要这样做。

在 CSS 中使用 Angular 特定属性将您的设计/布局与 Angular 结合起来。你不能改变你的 JavaScript 框架而不改变你的 CSS。您甚至无法在不更改 CSS 的情况下升级到 Angular 2+，因为不再有 ng-if 属性。此外，您必须在视图中的逻辑发生变化时更新您的 CSS。这种耦合很糟糕，应该避免。

对元素、类和 ID 使用选择器。

【讨论】：

【解决方案2】：

有很多原因。我会选择一个比较实用的。

你有三个不同的东西：

样式 CSS
结构 HTML
代码JS

您希望它们尽可能分开，这样您就可以修改一个而不会有弄乱另一个的危险。

当你这样做时：

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

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

现在这一切都与您的代码的目的有关。如果你只是在做一个你会在晚上扔掉的一次性原型——谁在乎你是怎么做的。如果您做某事的时间更长，则必须保持这种状态，然后遵循 https://en.wikipedia.org/wiki/Separation_of_concerns 方面的最佳实践

【讨论】：