Na implementação de estilos para sua página o desenvolvedor tem a mão várias formas de incluir estilos. Desde o velho CSS até o uso de pré-processadores como Sass.
Ultimamente uma forma de inclusão de estilos que vem se destacando é a CSS-in-JS. Considerando a utilização de componentização em JavaScript, visando a reutilização dos mesmos componentes em diversas telas economizando tempo de desenvolvimento e a criação de soluções seguindo um design estabelecido para o sistema inteiro, o uso de CSS dentro de um componente Javascript pode ajudar nessa demanda.
Além disso, já é conhecido dos desenvolvedores que a colisão de estilos é um obstáculo que ocorre bastante nos projetos. Ela acontece quando você estiliza uma tag sem o uso de classes ou cria classes com os mesmos nomes para estilizar seus elementos.
E isso aumenta o uso de !important, uma manobra que pode ser traiçoeira ao realizar a manutenção do sistema depois, já que pode acabar fazendo necessário o uso de outro !important
Utilizando o CSS-in-JS esse problema não ocorre.
Explorando um pouco do universo de CSS-in-JS, existem algumas libs mais conhecidas:
O Styled Components, objeto de análise desse artigo, foi desenvolvido para que o desenvolvedor tenha uma maneira mais fácil de lidar com CSS nos componentes de aplicações React.
As vantagens presentes na lib são:
Critical CSS Automático: Os componentes são renderizados e injetam apenas seus estilos contribuindo para uma menor quantidade de código para o usuário final.
Sem colisão de classes: O styled-components fornece nomes de classes a prova de colisão. Nada mais de quebrar a cabeça só porque precisa mudar a posição ou cor de um objeto. Além disso, tudo que você precisa vai estar no próprio contexto do componente, facilitando o desenvolvimento.
Uso apenas do CSS necessário: Funcionando diretamente nos componentes, ajuda a diminuir o código final, pois o que não é necessário pode ser removido.
Estilo dinâmico simples: Adaptando os estilos baseando nas props recebidas, é possível criar estilos dinâmicos de forma fácil e intuitiva.
Vendor prefixing automático: Você escreve seu CSS no melhor padrão do mercado e pronto, os componentes cuidam para fornecer suporte para browsers antigos.
Exemplo de uso:
Top comments (0)