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;

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

@mixin page-header(){
        width: 100%;
        display: block;

and then I can use it on the page:

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

and SCSS:

  @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.


closed as off-topic by 200_success, Toby Speight, dfhwze, Peter Taylor, Sᴀᴍ Onᴇᴌᴀ Aug 28 at 22:03

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – 200_success, Toby Speight, dfhwze, Sᴀᴍ Onᴇᴌᴀ
If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\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 at 9:20

Browse other questions tagged or ask your own question.