Styled Components ou CSS Modules

[devigor]

Hoje o que vocês tem usando para estilizar seus componentes em ReactJs, Styled Components ou CSS Modules?

[alinebastos]

Comecei a mexer com styled components semana passada e achei legal a experiência! Mas não tenho como comparar com CSS modules pq ainda não tive o prazer de trabalhar com ele :)

[alinebastos]

Inclusive tô no meio de um artigo sobre styled components, depois colo aqui :D

[felipefialho]

Pode contribuir

#110

[matheusml]

Ambas soluções combinam muito bem com React (e componentização no geral).

Se você for muito fã de CSS e quiser tentar ser mais conservador, vá de CSS Modules.
É o mesmo CSS de sempre, só que ele só vai valer pros locais que você importa (a menos que você explicitamente os deixe globais).

Agora se CSS não é muito a sua, ou você quer testar algo bem novo, aí Styled Components é o ideal. Não existem mais classes, nem arquivos .css. É tudo JavaScript, local, componentizado.

Eu já usei CSS Modules em alguns projetos em produção e recomendo fortemente.
Styled Components ainda não consegui escolher em nenhum projeto.

[bernardodiasc]

Trabalhei muito com CSS Modules e achei ótimo. To trabalhando com Styled Components agora, é muito bom tambem, mas confesso que ainda prefiro o outro.

[fernandofleury]

Sinceramente não dá pra comparar os dois. é tipo querer falar de angular e react. São duas abordagens completamente diferentes, com conceitos completamente diferentes.

O máximo que posso fazer pra contribuir é esse link aqui: https://github.com/MicheleBertoli/css-in-js Ai você pode tentar pensar em qual é o problema que você quer solucionar e baseado nisso qual ferramenta você vai usar.

[raphaguasta]

Há algum tempo saiu um artigo bem legal falando sobre isso (em inglês):

Stop using CSS in JavaScript for web development:
https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

[wilsongomes-swe]

Galera, um pouco antigo esse tópico, mas ainda estão válidas as respostas? Ambos são recomendados e fica a livre escolha, ou hoje já existe um que seja considerado padrão de mercado?

Abraços!

[alexsandro-xpt]

Eu ando incomodado em como trabalhar com CSS com Vue, React e Angular... eu ando questionando muito Material Design, Bootstrap, Bulma CSS e familia... cheguei um dia teste até achar um framework chamado UI Fabric da Microsoft pra React. Eu não sei o que usar diante estas opções.

[felipefialho]

@wilsonneto-dev Styled Component (e outras soluções CSS-in-JS) fazem muito sentido no atual cenário de desenvolvimento (especialmente nas baseadas em React).

Olha com carinho que vale a pena :)

[alinebastos]

Esqueci completamente que tinha prometido jogar o link do artigo aqui :P

Mas, resumindo, como já falaram acima, vai depender muito das necessidades do projeto ou de quem está desenvolvendo, não existe resposta 100% certa :)

CSS no JavaScript em componentes React: quais as vantagens e desvantagens?

[wilsongomes-swe]

SHow, muito obrigado!

[felipefialho]

Aproveitando a ressurreição dessa (bela) issue, escrevi esse artigo que pode contribuir aqui.

[eliseumds]

#1532 (comment)

[leandroluk]

Vou deixar um pequeno feedback que eu tenho em 4 anos de react e 12 de frontend:

styled-components:

Assim como outras bibliotecas de CSS-in-JS ela permite que você compartilhe variáveis em javascript dentro dos estilos. Além disso já abstrai um bocado das coisas que se faz com componentes pré-prontos.

Sinceramente eu não usaria pois apenas abstrai o que você faz em CSS de uma forma que parece ser vantagem já que ao final lhe possibilita minificar as classes transformando-as em algo como sc-{alguma_coisa}.

Além disso, qualquer alteração que você faz no arquivo de CSS ele re-renderiza o componente pois precisa compilar o mesmo novamente, o que é horrível no ponto de vista do desenvolvimento.

CSS Modules:

Pode parecer simples mas é muito mais poderoso do que qualquer biblioteca CSS-in-JS pois além de ser o próprio DOM que faz a compilação das classes (o que é até 4 vezes mais rápido que o JSS e não re-renderiza os componentes, conforme um artigo que eu li no medium e não estou achando agora....), você ainda pode trabalhar com SASS / SCSS / Style ou Less. Isso facilita para fazer a migração de códigos antigos se necessário.

Também permite estender classes de bibliotecas que ainda não foram "React-zadas" como o PureCSS, o UI Kit ou bibliotecas legado.

Outro ponto que o pessoal acha que não pode ser interessante é quando se pensa no caso de classes em produção (o tal do sc-{alguma_coisa}. O que a maioria dos desenvolvedores React não sabem (isso porque não puderam se aprofundar no webpack) é que é possível fazer a transformação que quiser. Para isso basta seguir o tutorial abaixo:

1. crie um novo projeto: create-react-app example && cd example
2. adicione as dependências do react-app-rewired: yarn add react-app-rewired customize-cra
3. altere o package.json como está abaixo:

4. crie o arquivo que faz a mágica por trás do build do react no webpack e transforma as classes no que você quiser:

const { override, adjustStyleLoaders, useBabelRc } = require('customize-cra');
const loaderUtils = require('loader-utils');
const path = require('path');

module.exports = override(
    ['prod', 'production'].includes(process.env.NODE_ENV) &&
    adjustStyleLoaders(({ use: [, css] }) => {
        if (css.options.modules) {
            css.options.modules.getLocalIdent = (context, _, localName, options) => {
                const hash = loaderUtils.getHashDigest(path.posix.relative(context.rootContext, context.resourcePath) + localName, 'md5', 'base64', 6);
                return loaderUtils.interpolateName(context, 'sc' + hash, options).replace('.module_', '_');
            };
        }
    }),
    useBabelRc(),
);

5. Crie o arquivo jsconfig.json para trabalhar com path's relativas dentro do projeto:

{
    "compilerOptions": {
        "baseUrl": "./src",
    }
}

6. Adicione node-sass com o comando yarn add -D node-sass para usar SCSS ou SASS ou qualquer outra biblioteca que faça a compilação do código (no caso de querer usar algum pre-processador de CSS como eu gosto.

Altere o nome dos arquivos CSS que você criar colocando o pos-fixo ".module.{extensão_do_pre-processador}". Isso é necessário apenas para os componentes, para os estilos globais você pode usar apenas a extensão do pre-processador ficando algo assim:

7. Corrija a importação no index.js e altere o arquivo App.jspara passar a usar CSS Modules (fiz alterações no conteúdo pra ficar menor a imagem):

8. Altere as classes do App.module.scss, no caso eu troquei o traço "-" por underline "_" mas faça como quiser:

A partir daí é uma aplicação CRA normal com a possibilidade de você usar plugins do babel e ainda minificar as classes do CSS Módulos.

Bonus: aqui vai um template para quem tiver com preguiça de seguir o tutorial: https://github.com/leandroluk/cra-css-modules-template

O resultado final é isso:

[kivervinicius]

@leandroluk desde 2018 não é mais necessário reescrever o cra para ter acesso a modules, podemos utilizar normalmente https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

[leandro-in8]

A reescrita do CRA não é para acessar os css modules mas sim para ter o mesmo efeito que se tem no styled-components em relação ao build em produção. Além disso, ao reescrever você pode passar a usar inúmeros plugins do babel que são extremamente interessantes e que no CRA base não rola

[ninetails]

Depende... Há certos ganhos a quem não quiser ejetar (ex: acompanhar melhorias do react-scripts).

E também vale adicionar que também é possível utilizar uns plugins específicos sem precisar ejetar, como no próprio caso do styled-components é possível utilizar Babel Macros. Não sei se há algo pra CSS Modules, mas vejo ejetar/rewire pra usar somente em casos específicos, coisa que o básico (adicionar sass ou typescript) já é suportado no react-scripts@v2+

[leandro-in8]

Mas usando dessa maneira você não ejeta =D, o react-app-rewired usa todo o escopo do cra e apenas complementa com o que for necessário,

[ninetails]

Mas qualquer biblioteca de rewire é dependente de que não mudem a estrutura do react-scripts. Ainda acho que são casos específicos que se puderem ser evitados, melhor. Mas ainda sim, mais comodo que ejetar. Só acho que deveria ser feito conforme a necessidade e não somente usar por existir... e pessoalmente ainda opto por evitar. Usar só em projetos pessoais e pequenos, onde qualquer problema posso travar versão etc.

[leandroluk]

ai que tá, sobre qualquer problema "poder travar a versão" já não é erro do frontend ou do desenvolvedor, é erro de estrutura.. afinal qualquer empresa que se preze a ter uma boa solução tem lá seus ambientes de desenvolvimento (dev/stage/prod) como manda no CI/CD Em qua., 12 de ago. de 2020 às 11:01, Carlos Kazuo <[email protected]> escreveu:

…

Mas qualquer biblioteca de rewire é dependente de que não mudem a estrutura do react-scripts. Ainda acho que são casos específicos que se puderem ser evitados, melhor. Mas ainda sim, mais comodo que ejetar. Só acho que deveria ser feito conforme a necessidade e não somente usar por existir... e pessoalmente ainda opto por evitar. Usar só em projetos pessoais e pequenos, onde qualquer problema posso travar versão etc. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/774#issuecomment-672889192>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBUKZVHVVCU5IOF3LYKUWTSAKOCLANCNFSM4D76UCBA> .

--

-- *ATT* *Leandro Santiago Gomes* Github <https://github.com/leandroluk> | Stackoverflow <https://pt.stackoverflow.com/users/237/leandroluk> | Linkedin <https://www.linkedin.com/in/leandro-santiago-gomes-b7716950/> | Curriculum Vitae <https://drive.google.com/open?id=1RjEJHxJMTFM3JIbHsHiEiQhEUNZgkTtDXU_8aZMpAq0>

[GabrielSantosLemos]

Olá Galera !!

Estou entrando agora no role de CSS Modules

Estou escrevendo minhas próprias classes no SCSS, no responsivo estou usando o sistema de Grid do Bootstrap _bootstrap-grid.scss fazendo o import "node_modules/bootstrap/scss/bootstrap-grid" . Estou querendo usar alguns componentes específicos também como os Buttons ou alguns outros, li que é uma boa pratica fazer o @extend para utilizar os estilos.

.meuBotao {
     @extend .btn;
}

Então em todos os lugares que eu for utilizar o @extend .btn ou o Grid eu tenho que fazer os import dos arquivos Bootstrap.

Ate que percebi que o meu app estava renderizando varias vezes os mesmos códigos de style no HTML, e isso bate com a quantidade de vezes que fiz os import do arquivo

Veja que para cada importação ele faz

Bom isso me preocupa pois não tenho muito conhecimento nesse ecossistema, não quero fazer o role bugado kkkk.

Estou indo no caminho certo?
A uma maneira correta para isso?

Agradeço. vlw