Polished: Simplificando a Manipulação de Estilos CSS em Projetos React

Simplifique sua Abordagem de Estilização com o Polished em Componentes React.

Ultimamente tenho utilizado este camarada em meus projetos pessoais e gostaria de falar um pouco sobre o polished, numerando o que achei como positivo e negativo de utilizar essa lib, que tem sido um grande utilitário dentro das minhas aplicações.

Polished é uma biblioteca JavaScript que oferece uma série de funções utilitárias para trabalhar com estilos CSS de maneira mais eficiente e prática. Neste artigo, vou apontar suas vantagens e desvantagens pela minha perspectiva, fornecendo exemplos de código e usos para demonstrar como ele pode ser útil. Além disso, irei trazer o problema da comunidade que o Polished se propõe a resolver.

Essa biblioteca é muito apreciada pela comunidade por sua simplicidade e funcionalidades úteis. Se você está trabalhando em projetos React e CSS-in-JS, o Polished pode ser uma ótima adição para aprimorar seus estilos e tornar seu código mais elegante, vale lembrar que ela é mantida pela mesma comunidade que mantém o Styled-Components, outra lib excelente para quem trabalha com CSS-in-JS, para quem não conhece vale muita a pena dá uma olhada.

Vantagens do Polished

Sintaxe simplificada: O Polished permite escrever estilos CSS em JavaScript o famoso CSS-in-JS, de forma mais concisa e legível, evitando a necessidade de strings complexas de CSS. Por exemplo, para definir uma cor em CSS, normalmente escreveríamos algo assim:

Com Polished, podemos usar uma função utilitária para obter o mesmo resultado:

Manipulação avançada de cores: A biblioteca oferece uma série de funções para manipular cores de forma mais avançada, como criar tons, sombras e muito mais. Essas funcionalidades são extremamente úteis para criar designs mais atraentes e acessíveis, como, por exemplo, a função darken que escurece a cor em 20% desse jeito:

Compatibilidade com CSS-in-JS: O Polished é altamente compatível com bibliotecas de CSS-in-JS, como styled-components. Ele pode ser facilmente integrado a essas bibliotecas para estender suas funcionalidades e tornar a estilização mais dinâmica.

Melhor legibilidade do código: Com o Polished, é possível criar estilos mais legíveis e reutilizáveis, melhorando a manutenção do código e tornando-o mais organizado.

Desvantagens do Polished

Mais uma dependência: Adicionar o Polished ao projeto significa adicionar mais uma dependência, o que pode aumentar o tamanho do pacote final e potencialmente causar impactos negativos na velocidade de carregamento.

Curva de aprendizado: Se os devs do time não estão familiarizados com a lib, pode ser necessário um tempo adicional para aprender a usar suas funcionalidades e entender suas nuances.

Como utilizar o Polished em seus projetos

Instale a biblioteca polished usando o npm ou o yarn.

npm install polished

ou

yarn add polished

Nesse exemplo em específico vou utilizar em conjunto uma lib CSS-in-JS, o Styled-Components.

Para instalar o Styled-Components faça o seguinte

npm install styled-components

ou

yarn add styled-components

Digamos que estamos criando um componente React com Styled-Components e queremos estilizar um botão com um gradiente de cor usando o Polished:

Criando um componente Button em gradiente no React via Styled-Components em conjunto com o Polished.

Pronto, a partir disso você já consegue importar ele em alguma view do seu projeto e utilizar da maneira que desejar, ficando algo assim:

Métodos populares do Polished

Para finalizar vou citar alguns dos métodos, mas utilizados dessa lib, facilitando o reuso em outros lugares.

rgba:

A função rgba é usada para definir cores com transparência. Ela recebe quatro parâmetros: os valores de vermelho, verde, azul e alfa (transparência) em uma escala de 0 a 1.

Define um vermelho semi-transparente.

lighten e darken:

As funções lighten e darken permitem ajustar a luminosidade de uma cor, tornando-a mais clara ou mais escura, respectivamente. Isso pode ser útil para criar efeitos de destaque ou sombreamento.

O lighten torna o azul mais claro em 20% enquanto o darken torna o azul mais escuro em 20%.

radialGradient:

Assim como linearGradient, a função radialGradient permite criar gradientes radiais. Ela também aceita o objeto colorStops, mas a direção não é necessária para esse tipo de gradiente.

Cria um radial gradiente de cores utilizando o vermelho e azul.

transparentize:

A função transparentize permite tornar uma cor mais transparente, ajustando o valor alfa. Isso pode ser útil para criar efeitos de sobreposição ou mistura de cores.

Torna o vermelho 50% transparente.

Resumo

O Polished foi criado para resolver o problema de simplificar a manipulação e escrita de estilos CSS em JavaScript. Ele oferece funções utilitárias que permitem trabalhar com cores, sombras e outras propriedades CSS de maneira mais fácil e eficiente. Com sua sintaxe simplificada e compatibilidade com CSS-in-JS, o Polished ajuda a melhorar a legibilidade do código e a criar estilos mais sofisticados e dinâmicos, proporcionando uma experiência de desenvolvimento mais agradável. Embora seja uma adição útil para muitos projetos, é importante pesar as desvantagens, como a introdução de mais uma dependência, antes de decidir usá-lo em um projeto específico, fique a vontade para usar do jeito que desejar em seus projetos.