Apesar de ser ensinado para usar o css dentro do javascript, é aceito como boa prática? Pois o código fica mais "sujo" do que utilizar um arquivo css.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Apesar de ser ensinado para usar o css dentro do javascript, é aceito como boa prática? Pois o código fica mais "sujo" do que utilizar um arquivo css.
Oi Vinicius, tudo bem?
Desculpe a demora em retornar.
Antes de responder à sua pergunta sobre se usar CSS-in-JS é uma boa prática, vamos entender o que é CSS-in-JS e por que ele foi criado.
O CSS-in-JS é uma técnica de escrever CSS dentro do JavaScript, em vez de um arquivo CSS externo. A ideia por trás dessa técnica é que ela permite que você crie estilos dinâmicos, com base em estados ou propriedades de componentes, sem precisar adicionar classes ou ids a eles. Além disso, CSS-in-JS pode ajudar a evitar problemas de especificidade e conflitos de estilo.
Existem várias bibliotecas disponíveis para usar o CSS-in-JS, como o Styled Components, o Emotion e o CSS Modules. Essas bibliotecas fornecem uma sintaxe semelhante ao CSS e permitem que você crie estilos reutilizáveis e modulares.
Agora, voltando à sua pergunta, usar CSS-in-JS é uma boa prática? A resposta é: depende.
Há argumentos a favor e contra o uso de CSS-in-JS. Algumas vantagens incluem:
Evitar problemas de especificidade e conflitos de estilo: ao escrever o CSS dentro do JavaScript, você pode garantir que os estilos aplicados a um componente sejam específicos apenas para esse componente e não sejam afetados por estilos em outros lugares do seu aplicativo.
Criar estilos dinâmicos: com CSS-in-JS, você pode criar estilos com base em estados ou propriedades de componentes. Isso permite que você crie estilos que se adaptam às interações do usuário e às mudanças de dados.
Facilidade de reutilização: ao usar bibliotecas de CSS-in-JS, você pode criar estilos reutilizáveis e modulares que podem ser aplicados a vários componentes em seu aplicativo.
Por outro lado, algumas desvantagens do CSS-in-JS incluem:
Aumento da complexidade do código: escrever CSS dentro do JavaScript pode tornar seu código mais difícil de entender e manter, especialmente se você estiver trabalhando em uma equipe grande ou com muitos desenvolvedores.
Dificuldade em compartilhar estilos: se você está trabalhando em um projeto com vários desenvolvedores, pode ser difícil compartilhar estilos entre componentes ou páginas.
Dependência de bibliotecas de terceiros: se você está usando uma biblioteca de CSS-in-JS, está adicionando uma dependência adicional ao seu projeto. Isso pode aumentar o tamanho do seu pacote e afetar o desempenho do seu aplicativo.
Em última análise, a escolha de usar CSS-in-JS ou não depende das necessidades do seu projeto e da sua equipe. Se você está trabalhando em um projeto menor e quer criar estilos dinâmicos e modulares, o CSS-in-JS pode ser uma boa escolha. No entanto, se você está trabalhando em um projeto maior ou com muitos desenvolvedores, pode ser melhor usar um arquivo CSS externo para facilitar a manutenção e o compartilhamento de estilos.
Espero ter ajudado.
Um abraço e bons estudos.