Considering best practices in Angular, I am wondering if we should use ng-if as a CSS Attribute selector or not.

Please find below HTML and CSS code for reference.

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;
}

Any input would be appreciated.

Thanks in advance :)

Considering best practices in Angular, I am wondering if we should use ng-if as a CSS Attribute selector or not.

Please find below HTML and CSS code for reference.

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;
}

Any input would be appreciated.

Thanks in advance :)

• javascript
• html
• css
• angularjs
• css-selectors

• 2 ng-if is angular thing. Adding this in CSS might work but is not best practice. Create independent classes and based on state, add them to element – Rajesh Commented Apr 12, 2017 at 8:11
• 1 I just wonder, what prevents you from adding a class to those elements? (something like 'alert-default cls-manual-edit') – Vladimir M Commented Apr 12, 2017 at 8:17
• 1 @KushalJayswal Because using attribute based selector can fail if someone removes the attribute on the fly. Also, ng-* are angular tags and are known to devs working on angular. For a designer, it would be difficult to understand it. Also angular tags are used to make view more dynamic and should be use for it only. @str's answers explains it – Rajesh Commented Apr 12, 2017 at 8:20
• 2 because you want your page rendering to depend on your style definition, not the other way around. – Vladimir M Commented Apr 12, 2017 at 8:30
• 1 @KushalJayswal these conditions are a part of your apps business logic. This should be a part of JS and/or HTML. But definitely not CSS. CSS should have rendering logic like media query. I'm even against using too many conditions in view. You should create a function and bind this function to view instead. This keeps code and HTML clean and makes debugging easier. But its just my POV. – Rajesh Commented Apr 12, 2017 at 8:55

2 Answers 2

No, do not do this.

Using Angular specific attributes in CSS couples your design/layout to Angular. You cannot change your JavaScript framework without changing your CSS. You cannot even upgrade to Angular 2+ without changing your CSS as there is no ng-if attribute anymore. Furthermore, you would have to update your CSS anytime the logic in your view changes. That coupling is bad and should be avoided.

Use selectors for elements, classes, and IDs instead.

There are a number of reasons. I'll pick a fairly practical one.

You have three separate things:

• style CSS
• structure HTML
• code JS

you want them to be as separate as possible so that you can modify one w/o much danger of messing up the other.

When you do this:

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

you basically create a dependency of your style definition on both: structure and code. Now if you want, for example to change ng-if to ng-show/hide or if you want to refactor your code to use different variable names, your style definition has to change as well.

Now it all es to the purpose of your code. If you are just doing a throw-away prototype that you will toss away in the evening - who cares how you do it. If you are doing something for longer time, that has to be maintained, then following the best practices in terms of https://en.wikipedia/wiki/Separation_of_concerns