Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 4, 2023 03:48 pm GMT

Como deixar componentes React mais organizados mesmo com Tailwind CSS?!

Contexto

Muito se discute sobre as melhores formas de escrever CSS usando React. Por existirem diversas possibilidades (frameworks diferentes, CSS-in-JS, SASS, ...) as opinies costumam ser divergentes.
Aps a recente atualizao na documentao do React, o Next.js (Next.js um framework React full-stack) passou a ser indicado como uma das principais maneiras de se iniciar um projeto React.

Seguindo a prpria documentao do Next.js, podemos ver que o Tailwind uma tima opo para ser utilizada para estilizao:
Link: https://beta.nextjs.org/docs/styling/tailwind-css

Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.

As maiores crticas que costumo ver ao Tailwind so:

  • Deixa o HTML "sujo";
  • No pode ser reaproveitado, gerando muita repetio de cdigo.

Homem falando "Blah blah blah"

Contedo

Aps estudar um pouco sobre CSS Modules e Vanilla Extract, percebi que podemos utilizar a "mesma ideia" de organizao para tornar o Tailwind mais agradvel e manutenvel.

Para isso, vou usar de exemplo a refatorao de um pequeno componente de uma Navbar.

Badge escrito "Don't"

function NavbarUnorganized () {  return (    <nav className="flex flex-col lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2 border-green-600 items-center justify-between bg-backgroundWhite">      <a href="/">        <img className="w-[125px]" src="#" alt="Logo da Nav de Exemplo." />      </a>      <ul className="flex flex-col md:flex-row gap-2 md:gap-8 font-kalam">          <li><a href="/" className='text-green-600 text-xl lg:text-2xl navlink'>Home</a></li>          <li><a href="/produtos" className='text-green-600 text-xl lg:text-2xl navlink'>Produtos</a></li>          <li><a href="/contato" className='text-green-600 text-xl lg:text-2xl navlink'>Contato</a></li>          <li><a href="/carrinho" className="flex items-center gap-2 text-green-600 text-xl lg:text-2xl navlink">Carrinho</a></li>      </ul>    </nav>  );}

Nesse caso, temos um componente simples, sem lgica associada. Mesmo assim podemos perceber a dificuldade de dar manuteno em um cdigo assim. Se precisarmos alterar os estilos da lista, teramos que ir em item por item.

Badge escrito "Do"

Podemos melhorar isso simplesmente criando um arquivo JS para armazenar os estilos em variveis:

//index.css.jsexport const container = "flex flex-col lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2 border-fontPurple items-center justify-between bg-backgroundWhite"export const ul = "flex flex-col md:flex-row gap-2 md:gap-8 font-kalam"export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Agora podemos importar essas variveis em nosso componente e utiliz-la em nossas classes, tornando-o bem mais legvel:

//index.jsximport {    container,    ul,    navLink } from "./index.css";function NavbarOrganized () {    return (        <nav className={container}>          <a href="/">            <img className="w-[125px]" src={'https://http.cat/202'} alt="Logo da Nav de Exemplo." />          </a>          <ul className={ul}>              <li><a href="/" className={navLink}>Home</a></li>              <li><a href="/produtos" className={navLink}>Produtos</a></li>              <li><a href="/contato" className={navLink}>Contato</a></li>              <li><a href="/carrinho" className={navLink}>Carrinho</a></li>          </ul>        </nav>      )}

Dica extra

Image description
Pelo fato do nosso index.css.js ser um arquivo Javascript, podemos tambm utilizar interpolaes para extrair padres de texto (conjunto de classes). Por exemplo com padres que se repetem com frequncia como flex-containers, poderamos passar disso:

export const container = "flex flex-col items-center justify-between lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2  bg-backgroundWhite"export const ul = "flex flex-col items-center justify-between md:flex-row gap-2 md:gap-8 font-kalam"export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Para algo mais simples:

const flexCol = "flex flex-col items-center justify-between" export const container = `${flexCol}  lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2  bg-backgroundWhite`export const ul = `${flexCol} md:flex-row gap-2 md:gap-8 font-kalam`export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Como esse tipo de padro se repete muito ao longo de um projeto, talvez voc queira armazenar esses conjuntos de classes em um arquivo global, fora do componentes.

Concluso

Existem diversas maneiras de tornar o uso do Tailwind mais simples e de aproveitar o reuso dos estilos.
Alguns recursos so nativos e esto na prpria documentao (como a extrao de classes com o uso do @apply, criao de um componente, uso de loops, etc):
https://tailwindcss.com/docs/reusing-styles

Mas atualmente tenho gostado bastante de extrair como string (em vez de usar @apply), pois mais rpido/prtico.


Original Link: https://dev.to/ramoscarloseduardo/como-deixar-componentes-react-mais-organizados-mesmo-com-tailwind-css-4aal

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To