1
\$\begingroup\$

For a long time I've been using Angular "Layout" components so their role is basically to define layout, like padding, margin, fonts and so on.

For instance, page header component:

<my-header>My super page</my-header>

So now this component will have SCSS:

:host {
    width: 100%;
    display: block;
    padding:10px
}

But it's kind of the same I can achieve with SASS mixins:

@mixin page-header(){
        width: 100%;
        display: block;
        padding:10px
}

and then I can use it on the page:

<div class="page-header">My super page</div>

and SCSS:

div.page-header{
  @include page-header();
}

I don't see much difference. The only benefit of components would be bundle size, since if mixins are "big" and used in many places then size will be bigger.

My question is, what is the best way to make structural/Layout components? I appreciate any thoughts/recommendation they usually lead to better decisions :)

It's not a question for components like <my-header [image]="cat.jpg" [header]="text"></my-header>. The questions how it's better to make components which contains mostly CSS.

\$\endgroup\$
  • \$\begingroup\$ Could you include a non-trivial example so we get an idea for which components you would to get a review? \$\endgroup\$ – dfhwze Aug 28 '19 at 9:20

Browse other questions tagged or ask your own question.