Polished: Simplificando a Manipulação de Estilos CSS em Projetos React
Tags: javascript, react, css, polished
Published: 2023-07-31 10:39:06

_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](https://polished.js.org/) é 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](https://styled-components.com/), 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:


![Exemplo em CSS puro de uma cor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctinvfq51lkgh7fyollv.png)

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


![Exemplo em Polished de uma cor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clpz1udshaxthnsa2669.png)

**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:

![Exemplo em Polished de como escurecer uma cor em 20%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thuzufhcg85n9trkdniv.png)

**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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l68v0qhpro0te9xnzwlh.png)
_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:


![Resultado final de como ficou o Button via Polished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocajrjf6jjc4mjytwyjq.jpg)

## 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtxa7b43pvmf5bdgfksv.png)
_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%.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cjal326snjt7cycbiw3.png)
_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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv6ha4qg5shuxbk4s7ne.png)
_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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tehn99no5b6rdugiy3mc.png)
_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.