I've been looking at a few Angular 2 frameworks, mainly Angular Material 2 and Ionic 2. In their ponent stylings, there are a few styles where the CSS is put directly on the tags. For example, for the Card ponent, you see styles like this:

md-card { // some styling }

vs

.md-card { // some styling }

Which would be considered a best practice? Main reason I'm asking is because I'm working on a project where some of the ponents have styling on tags and others are using the classic approach.

One benefit I could see in the elements approach is that the HTML template(s) would have less bloat -- no need for an inner tag. Another would be that using certain Decorators like HostBinding would be just slightly easier.

I've been looking at a few Angular 2 frameworks, mainly Angular Material 2 and Ionic 2. In their ponent stylings, there are a few styles where the CSS is put directly on the tags. For example, for the Card ponent, you see styles like this:

md-card { // some styling }

vs

.md-card { // some styling }

Which would be considered a best practice? Main reason I'm asking is because I'm working on a project where some of the ponents have styling on tags and others are using the classic approach.

One benefit I could see in the elements approach is that the HTML template(s) would have less bloat -- no need for an inner tag. Another would be that using certain Decorators like HostBinding would be just slightly easier.

• javascript
• css
• angular
• typescript
• sass

Share Improve this question Follow asked Feb 8, 2017 at 1:52 Android NoobAndroid Noob 3,34144 gold badges3737 silver badges6060 bronze badges 1

• I think if the styling is specific for the ponent then attribute naming based styling makes sense. – user1752532 Commented Feb 8, 2017 at 5:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

We can do like this, hope its what you want

styles: [`
    :host {
        display: inline-block;
        border: 1px solid black;
    }
`]

eg:

@Component({
    moduleId: module.id,
    selector: 'selector',
    templateUrl: 'template.html',
    styleUrls: ['template.ponent.css'],
    styles: [`
        :host {
            display: inline-block;
            border: 1px solid black;
        }
    `]
})

Although I can't find it explicitly documented it seems Angular Material 2 strictly adds an equivalent class to every ponent with host metadata. Which is why both mat-card and .mat-card selectors work.

One benefit of the class selector is that your css rules aren't directly tied to the html implementation. For example MatSidenav has both mat-drawer mat-sidenav classes see so a .mat-drawer rule would cover both <mat-sidenav> and <mat-drawer> implementations. Also during the update from the md- prefix to the mat- prefix I believe all the ponents continued to use the md- prefix class as well for backwards patibility for a little while.

However using the class selector for Angular Material 2 requires implying that the developer has intimate knowledge that the class selectors will work. Although they don't seem to be hiding or discouraging that fact that you can use the class selectors see.

This maybe be one those things that is up to preference but as long as you are consistent, it should be maintainable. you could follow their pattern for your oun ponents