Styled Components vs SCSS, qual usar?

[wilsongomes-swe]

Galera entre estes dois, o que vocês veem de vantagens e desvantagens?
O que vocês usam no dia a dia e por quê?

Vejo muitos falarem que o styled acaba sendo mais pesado e criando mais divs, mas para ser sincero vejo duas abordagens diferentes mas que ambas no fim fazem o mesmo trabalho de maneira muito parecida, e que não vejo de fato vantagens e desvantagens...

Muito obrigado!

[raisiqueira]

Uso Styled Components/Emotion pela facilidade de usar o CSS no JS, fora que não me preocupo em pensar no nome das classes.

[wilsongomes-swe]

@raisiqueira , mas ai você terá de pensar em nome do componente, e ter dois componentes, um que se trata apenas do estilo e outro que seria o componente de fato, certo? Vejo aqui um tradeoff, não penso em classe e penso em componente, não escrevo CSS/SCSS e escrevo um objeto com as propriedades... Certo? O que quero dizer é que não vejo de fato vantagem, mas apenas uma abordagem diferente em que eu escolheria apenas por qual processo mais me agrada... Vê alguma vantagem que levaria pessoas acostumadas com SASS a adotar styled ou vice-versa?

[glauberm]

@wilsonneto-dev A vantagem é ter os estilos no JavaScript. Isso permite que eles entrem nas diversas otimizações que os bundlers JavaScript fazem (code-splitting, por exemplo) e também acopla o desenvolvimento dos seus componentes. A alteração de estilos é feita diretamente através do estado do componente. Variáveis, funções, mixins: tudo isso será JavaScript. Isso permite, inclusive, que os estilos sejam mais facilmente traduzidos para outras plataformas que não a web.

Ajuda no desenvolvimento porque abstrai muitas coisas, especialmente considerando que muitos devs têm medo de CSS. Mas essa abstração, como todas, tem um preço. Você perde a parte "cascata" do CSS, porque todos os estilos são únicos; se você tem muitos componentes na tela, muitas folhas de estilo serão carregadas, o que afeta o processamento; o seu processo de build vai ficar ainda mais demorado etc.

Claro que cada projeto é um caso e eu não sei o seu, mas no geral eu não indicaria CSS-in-JS. Um CSS bem estruturado e planejado é melhor. Dito isso, se for usar, vai de emotion.

[felipefialho]

@wilsonneto-dev A questão dos nomes das classes você resolve usando Sass + CSS Modules.

Não acho que CSS-in-JS seja melhor que o combo que falei ai em cima, e vice versa. Precisa analisar o projeto e entender o que vale mais a pena utilizar.

Não sei se chegou a ler esse artigo, que falo um pouco sobre CSS-in-JS, acho que funciona na maioria dos cenários, mas não todos. Acredito que para aplicações baseadas em componentes seja uma escolha interessante, mas não tanto para projetos institucionais por exemplo, justamente pelos pontos apresentados pelo @glauberm.

[waldemirflj]

@felipefialho parabéns pelo artigo.

Galera entre estes dois, o que vocês veem de vantagens e desvantagens?
O que vocês usam no dia a dia e por quê?

Depende muito do projeto tecnologia/lib. Se for um projeto pequeno, eu utilizo HTML, SCSS e Js/vanilla. Já participei de projetos com Angular 100% .SCSS e alguns .CSS. Projetos React é mais comum com Styled Components devido o ecossistema, mas não errado utilizar .SCSS ou .CSS.

Quando eu caio nesse loop, me faço a seguinte pergunta: Qual recurso manjo mais... e pronto. hehehe

[kivervinicius]

hoje eu só usaria css in js para projetos em react native, realmente é mais vantajoso usar sass + modules

[italosilva01-zz]

Depende do projeto. Vejo a vantage em utilizar o styled component com React quando é um projeto médio/grande. Quando o projeto vai crescendo, o styled component assegura que os componentes não terão complitos entre seus estilos

[wilsongomes-swe]

@italosilva01 mas usando SASS + CSS Modules também garanto que não haverá conflito entre estilos, os estilos são "escopados" a somente aquele componente... É isto mesmo que você quis dizer? Neste ponto penso que não há vantagens entre um ou outro...

[italosilva01-zz]

Era isso msm que queria dizer.

[ninetails]

@italosilva01 mas usando SASS + CSS Modules também garanto que não haverá conflito entre estilos, os estilos são "escopados" a somente aquele componente...

Exato.

Aí volta ao que o @waldemirflj mesmo falou:

Qual recurso manjo mais... e pronto. hehehe

Na verdade tem tecnicamente suas diferenças. Todo render o CSS diferente vai ter que ser renderizado lá no head se utilizar styled-components. Já usando pré-processador, vc vai ter que fazer cada variação dele pra ir pro bundle final, não será algo feito em runtime (o que tira o processamento do runtime, mas traz o gerenciamento de classes pro React e o CSS deverá ter todas as variações). Mas tais diferenças de performance são imperceptíveis para a maioria das aplicações. Logo, no final acaba sendo a facilidade de manutenção e o que os desenvolvedores estão acostumados.

Em questão de tooling: tem stylelint pra ambos.

[dionarodrigues]

Encontrei um artigo bem interessante que explica algumas vantagens e desvantagens de ambos: Sass e Styled Components.

Ao meu ver, esses são dois pontos importantes para serem considerados:

• Sass trabalha de forma global, o que pode causar vários conflitos, principlamente quando não se está utilizando metodologias como OOCSS, SMACSS, BEM, DRY CSS, ITCSS - além de ser difícil de manter conforme o projeto começa a ficar extenso. Apesar que é possível utilizar SASS + CSS Modules como a galera disse.

• Styled components é um CSS-in-JS, o que faz com que possamos utilizar JS misturado com CSS. Talvez a grande vantagem, além de manter o CSS em um escopo específico, é o fato de poder definir estilos baseando-se em propriedades dos componentes React.

Mas há muitos outros pontos discutidos nesse artigo. Sugir dar uma lida nele. O artigo do @felipefialho também show
!

[jarodsim]

@raisiqueira , mas ai você terá de pensar em nome do componente, e ter dois componentes, um que se trata apenas do estilo e outro que seria o componente de fato, certo? Vejo aqui um tradeoff, não penso em classe e penso em componente, não escrevo CSS/SCSS e escrevo um objeto com as propriedades... Certo? O que quero dizer é que não vejo de fato vantagem, mas apenas uma abordagem diferente em que eu escolheria apenas por qual processo mais me agrada... Vê alguma vantagem que levaria pessoas acostumadas com SASS a adotar styled ou vice-versa?

Bem, no react há vantagem, pois usando css, o estilo de um elemento pode sobrepor outro, caso tenha o mesmo nome, nome de classe, ou ID. E isso é de certa forma bem chato. Na minha opnião também, o código fica mais bonito e organizado, e sim, da de estilizar um componente com styled components, e é super fácil...

[portothree]

@raisiqueira , mas ai você terá de pensar em nome do componente, e ter dois componentes, um que se trata apenas do estilo e outro que seria o componente de fato, certo? Vejo aqui um tradeoff, não penso em classe e penso em componente, não escrevo CSS/SCSS e escrevo um objeto com as propriedades... Certo? O que quero dizer é que não vejo de fato vantagem, mas apenas uma abordagem diferente em que eu escolheria apenas por qual processo mais me agrada... Vê alguma vantagem que levaria pessoas acostumadas com SASS a adotar styled ou vice-versa?

Bem, no react há vantagem, pois usando css, o estilo de um elemento pode sobrepor outro, caso tenha o mesmo nome, nome de classe, ou ID. E isso é de certa forma bem chato. Na minha opnião também, o código fica mais bonito e organizado, e sim, da de estilizar um componente com styled components, e é super fácil...

Não apenas no react, 'sobrepor' é o efeito cascata do css e tem mais relação com a ordem que cada regra css estará no bundle final do css carregado pelo browser. Cascading é uma feature e não um bug, se bem utilizado deixa de ser 'de certa forma bem chato'.

[wilsongomes-swe]

@portothree concordo plenamente, vejo uma galera que reclama do cascading e sobreposição, mas é uma das melhores features do css de modo geral em que vai acontecer em qualquer lugar, inclusivo no react... E eu sempre penso que se está ocorrendo muito elemento sobrepondo é o dev que está fazendo bagunça... No react vc tem o css as module, vc escopa seu css em apenas um elemento componente ou grupo, este ponto não é um bug ou uma vantagem do styled frente ao css/scss.

na vdd no styled me incomoda usar componentes que são de certo ponto elementos estruturais para fazer os estilos, e o que mais vejo aqui na empresa mesmo, galera cria um componente para ser apenas o estilo, e em outro lugar usa aquele componente em outro componente que será de fato estruturam... Vejo o css / html ou componente como que cada um com seu papel, mas tbm ambos são ferramentas e ambos tem seus pontos, acredito que td em tecnologia é tradeoff.

[felipefialho]

Só um ponto importante de acrescentar:

Totalmente possível criar estilos globais com Styled Components usando createGlobalStyle, então essa questão de perder os poderes da cascata (que sim, são super importantes em alguns cenários), não pode ser considerado um ponto negativo do SC.

[ninetails]

usar componentes que são de certo ponto elementos estruturais para fazer os estilos

Mas creio que essa é uma vantagem da componentização. Agrupar funcionalidades, seja do que for, em componentes

[wilsongomes-swe]

Sim, também, mas pessoalmente ainda gosto mais da abordagem com ambos componentizados, porém um em sass e outro em js, mas no fim realmente, o html já está no js, o estilo também é praticamente o mesmo do jsx. Aqui usamos ambos, mas o default na maior parte dos projetos é:

Mas ambos são tranquilos e massas demais, nem compara com os css's de 2 mil linhas que eu escrevia lá em 2010 rs

valeeeu!!

[jarodsim]

@raisiqueira , mas ai você terá de pensar em nome do componente, e ter dois componentes, um que se trata apenas do estilo e outro que seria o componente de fato, certo? Vejo aqui um tradeoff, não penso em classe e penso em componente, não escrevo CSS/SCSS e escrevo um objeto com as propriedades... Certo? O que quero dizer é que não vejo de fato vantagem, mas apenas uma abordagem diferente em que eu escolheria apenas por qual processo mais me agrada... Vê alguma vantagem que levaria pessoas acostumadas com SASS a adotar styled ou vice-versa?

Bem, no react há vantagem, pois usando css, o estilo de um elemento pode sobrepor outro, caso tenha o mesmo nome, nome de classe, ou ID. E isso é de certa forma bem chato. Na minha opnião também, o código fica mais bonito e organizado, e sim, da de estilizar um componente com styled components, e é super fácil...

Não apenas no react, 'sobrepor' é o efeito cascata do css e tem mais relação com a ordem que cada regra css estará no bundle final do css carregado pelo browser. Cascading é uma feature e não um bug, se bem utilizado deixa de ser 'de certa forma bem chato'.

Mas isso se torna chato (no css) por causa que no react, mesmo que seja outra página a ser renderizada, ela acaba herdando o estilo de outra página, caso tenha o mesmo nome de classe, por exemplo.

[wilsongomes-swe]

@jarodsim isso só se você quiser, pois se usar css as module corretamente suas classes só estarão presentes no contexto do elemento. Agora se você só adicionar o css ali realmente, mas eu julgo quase que incorreto usar o css direto sem escopar usando como módulo.

Exemplo do projeto em que estou agora:
Tenho inúmeras classes "container" em meu código e nunca aconteceu nem acontecerá de uma sobreescrever a outra, pois uso como módulo apenas naquele componente...

[maxjf1]

Um problema que sinto do styled-components é a perda da separação de responsabilidades, além da legibilidade.

Ter separadamente CSS, HTML e JS facilita muito a manutenção e legibilidade, e no React por natureza, já perdemos a separação do HTML e JS (algo que é mantido em outras libs/frameworks como svelte e vue). Nesse caso é vantajoso pois desejamos que o JS manipule o HTML.

Já a manipulação de CSS via JS é algo menos comum, normalmente feito através de mudança de classes (EX: adicionar a classe active) ou variáveis CSS. Principalmente hoje, com recursos avançados CSS (Pseudo elementos, seletores como :has, :hover, variáveis CSS e media query), o CSS se tornou uma linguagem muito mais auto-suficiente e performática (aceleração de GPU em alguns recursos).

Logo o uso do styled-components não só diminui a legibilidade (usando strings JS), mas também tira essa separação de responsabilidades.

Quanto ao "medo de CSS", sinceramente se é um Dev Frontend, deve abraça-lo ao invés de tentar dar voltas para evitá-lo.

Todavia, as vantagens do styled components como não se preocupar com nomenclatura de elementos, CSS condicional, são de fato bem interessantes. Ainda assim, pessoalmente iria preferir uma forma de ter esses recursos apenas com SCSS/CSS nativo