2

Eu tenho um componente princiap (main) reutilizável, ele seria algo como um widget, que a estrutura principal é separada em 3 partes (ou sub-componentes), que não serão reutilizados em nenhum outro lugar além do componente principal (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>

Cada um deles irá crescer separadamente em termos de HTML, CSS e Javascript/Typescript. A minha pergunta é, a melhor forma/boa prática utilizada na organização do CSS nesse caso?

1) Aglomerar os estilos dentro do css do componente principal?

<!-- 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) Segregar o css, cada qual com o seu, deixando os idepentende, apesar desses componentes nunca serem utilizados separadamente?

<!-- 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 -->    
}
2
  • 1
    O próprio Angular já responde sua pergunta, toda vez que cria um componente ele cria junto o Html, Scss, o TS e dependendo o spec referente aquele componente.
    – LeAndrade
    28/08/2019 às 14:46
  • Concordo, mas essa premissa vem das boas práticas de componetização, na hora de criar uma arquitetura de front-end, para uma melhor organização/reutilização do código, mas no caso que eu citei, se eu utilizar o "padrão angular", eu ganho em organização e perco em reutilização, já que terei css duplicado em alguns casos.
    – EJSpawn
    28/08/2019 às 15:31

2 Respostas 2

2

Quanto mais desacoplada for sua arquitetura sempre melhor. Hoje vc pensa que vão estar sempre juntos, mas nunca se sabe o dia de amanhã, quem sabe vc quer usar o mesmo header em outro projeto. Então nesse caso sempre ter o css do componente junto dele. O host ou o deep deve ser usado caso vc esteja usando uma biblioteca e quer mudar o css dela. Ou então tem um componente que em varios casos tem o css de um jeito mas em um caso especifico vc precisa mudar. Mas o estilo padrão do componente deve estar dentro dele.

1
  • Então de maneira geral, eu sei que desacoplado é melhor, mas esse é um caso, que as vezes é até comum, que os "sub componentes" realmente não funcionariam em outra situaçãoo, eles são feitos somente para organização do componente principal. No caso do uso adequado do Host (que ainda vou tentar me ilucidar em outra pergunta) eu acabo usando ele em todo componente, quando tenho a necessidade de uso de estilos.
    – EJSpawn
    28/08/2019 às 15:38
1

Aqui na empresa usamos VUE, não é o Angular, mas posso te dizer a prática que adotamos aqui. Apesar de não ser uma resposta canônica pode ser que te ajude em algo.

A resposta que tenho é que "tanto faz". Pelo menos aqui, o que tentamos seguir é o que a cultura do time prega. Que no caso do time e das facilidades do Vue concentramos HTML/CSS/JS dentro de um mesmo arquivo. Mas se o padrão da estrutura do projeto do seu time sempre foi manter separado, não há porque junta-los. Isso pode inclusive confundir os desenvolvedores e dificultara a manutenção. Escolha um padrão e use como regra. A consistência vai gerar a eficiência.

Além disso, como designer, me facilita muito ter os arquivos separados .css, .html e.js. Me dificulta muito a vida quando tenho que buscar <styles> dentro de arquivos .vue por exemplo. Eu debbugo no DevTools depois não encontro o .css dentro do projeto... isso me irritava um pouco no início. Mais tudo vai da cultura do seu time. Ao meu ver não tem regra definida, mesmo que sejam componentes únicos. Lembre-se da consistência que falei acima ;)

5
  • Eu vim com essa duvida enquanto tava criando um componente, algo como um Widget, crie ele em uma só estrutura de html, css e js, e resolvi quebrar eles nesses "sub componentes", e me vi, retirando css do componente pai e passando para os filhos. A ideia de ter que entrar em varios arquivos css para saber como cada pedaço daquele widget ta estilisado que me fez gerar essa pergunta,
    – EJSpawn
    28/08/2019 às 15:42
  • @EJSpawn mesmo sendo únicos hoje, pense de forma escalável... amanha não pode ser. ou então vc pode usar essa base para um projeto maior, onde tudo separado seria melhor, etc. Como te falei não tem resposta 100% correta para isso, vc vai ter que ponderar junto com seu time, só levantamos pontos que vc deve considerar na escolha.
    – hugocsl
    28/08/2019 às 15:48
  • Acho que no caso então, se seguiria a abordagem mais segura, que tivesse menos efeito colateral, seguir o padrão, do angular ou do seu time (se houver um no caso). Acho que irei seguir dessa forma.
    – EJSpawn
    28/08/2019 às 17:11
  • @EJSpawn sim, o ideal é estabelecer um padrão que seja confortável para o time e adota-lo. E sempre pense que o projeto pode escalar, migrar, ou servir de template para outros maiores etc. Pense na manutenabilidade e essas coisas tb.Valeu a força!
    – hugocsl
    28/08/2019 às 17:17
  • 1
    Sim, minha maior dúvida, era se nesse tipo situação valeria a pena "quebrar as regras", ou definir uma regra só para a situação, mas no fim das contas, dada as respostas, percebi que acabaria tendo zero ou pouca vantagem. Obrigado!
    – EJSpawn
    28/08/2019 às 17:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .