Segregate CSS in the construction of Angular components?

Question

I have a reusable component (main), it would be something like a widget, that the main structure is separated into 3 parts (or sub-components), which will not be reused anywhere else but the main component (main):

<!-- Código resumido -->
<!-- Componente Main -->
<div class="main">
    <!-- Sub Componente Header -->
    <div class="header"></div>
    <!-- Sub Componente Content -->
    <div class="content"></div>
    <!-- Sub Componente Footer -->
    <div class="footer"></div>
</div>

Each of them will grow separately in terms of HTML, CSS and Javascript/Typescript. My question is, the best form/best practice used in the CSS organization in this case?

1) Cluster styles within the css of the main component?

<!-- main-component.scss -->
:host {
    <!-- Css do componente main -->
    .header {
        <!-- Css do componente header -->
    }
    .content {
        <!-- Css do componente content -->
    }
    .footer {
        <!-- Css do componente footer -->
    }

    .header,
    .footer{
        <!-- Css recorrente nos dois componentes -->
    }
}

2) Segregate css, each with its own, leaving idepentende, although these components are never used separately?

<!-- main-component.scss -->
:host {
    <!-- Css do componente main -->    
}

<!-- header-component.scss -->
:host {
    <!-- Css do componente header -->    
}

<!-- content-component.scss -->
:host {
    <!-- Css do componente content -->    
}

<!-- footer-component.scss -->
:host {
    <!-- Css do componente footer -->    
}

Answer 1

The more uncoupled your architecture is always better. Today you think you will always be together, but you never know tomorrow, maybe you want to use the same header in another project. So in this case always have the css of the component next to it. The host or deep should be used if you are using a library and want to change its css. Or there is a component that in many cases has css in a way but in a specific case you need to change. But the standard style of the component should be inside it.

Answer 2

Here at the company we use VUE, not Angular, but I can tell you the practice we adopt here. Though not a canonical answer may help you in something.

The answer I have is that "it doesn’t matter". At least here, what we try to follow is what the team culture preaches. That in the case of the team and the Vue facilities we concentrate HTML/CSS/JS within the same file. But if the pattern of your team’s design structure has always been to keep them separate, there’s no point in putting them together. This can even confuse developers and make maintenance difficult. Choose a standard and use it as a rule. Consistency will generate efficiency.

Also, as a designer, it makes it very easy for me to have separate files .css, .html and.js. Makes life very difficult for me when I have to seek <styles> inside files .vue for example. I scrap in Devtools then I can’t find the .css within the project... it irritated me a little at first. Everything else goes from the culture of your team. In my opinion it has no defined rule, even if they are unique components. Remember the consistency I mentioned above ;)