Responsivo e módulos/componentes

[klarkc]

Opa galera, seguindo a sugestão de um brother na issue #793 criei essa aqui para tirar essa dúvida:

Como vocês fazem o CSS responsivo de componentes? Seja em React, Vue ou outro framework, colocam o css responsivo dentro do / atrelado ao componente (no escopo local do próprio componente) ou fazem uma folha de estilo global que manipule o css de todos os componentes?

[n3pu]

Styled Components ou CSS Modules #774
Espero ter ajudado.

[klarkc]

Não era bem isso, queria saber se vocês separam a folha de estilo para targets mobile por módulo ou componente (media queries ou outro css responsivo) ou mantém elas dentro do próprio módulo / componente

[bernardodiasc]

Geralmente pra projetos baseados em componentes, eu tenho umas folhas de estilo globais, variáveis etc. E no componente lido com os casos específicos desde. O problema é que media querie é relacionado ao viewport, então comecei a experimentar element queries, mas ainda não tenho opiniao formada sobre esse metodo.

[klarkc]

Element queries? Que legal cara já tinha pensado sobre isso, mas nem sabia que existia algo já implementado. Mas como vc não tenho uma opinião formada, talvez usar element queries adicione muita complexidade ao projeto como um todo, imagina debugar o css de um sistema inteiro escrito usando element queries

[bernardodiasc]

Bom, voce precisaria usar tecnicas de debug apropriadas pra essa metodologia, que poderia ser um sandbox/showcase com isolamento dos componentes. Desenvolver projetos em componentes requer um mindset específico pra isso que vai bem alem dos components em si, ou seja, a ideia de trabalhar componentes é exatamente nao ter que "debugar o css de um sistema inteiro". :)

[brunoravanhani]

Eu geralmente tenho alguns estilos globais básicos e o que for específico fica junto no css do componente.

[nandomoreirame]

Pensando em componentes e não no projeto como um todo, eu acredito que as media-queries estejam dentro de cada componente, fazendo-o responsivo por natureza e sendo portado para qualquer projeto de forma fácil.
Eu acredito que cada componente precisa ter seu HTML, seu CSS e seu JS próprio, assim como suas media-queries.

[felipefialho]

Uso a estratégia que escrevi nesse artigo desde 2013, e como hoje trabalhamos basicamente com componentes, faz mais sentido do que nunca.

Penso que todas as configurações e informações do componente devem ser auto-contidas e escaláveis.

[tarciozemel]

@klarkc Atrelado ao componente. Arquitetura com Sass + SMACSS + BEM e task runner para combinar regras em breakpoints iguais.