CSS: Tachyons e sua produtividade

Como CSS Funcional pode ajudar na sua criatividade diária

Image for post
Image for post
Um framework criado para te ajudar a criar! — Tachyons

Eu venho dos dias sombrios do CSS quando o suporte ao navegador era tão “à quem” e você tinha que ter fallbacks para seus fallbacks para o bom e velho IE9.

😭🔮💥

SASS é legal

Quando eu descobri o SASS, foi como respirar ar puro. Várias abstrações onde eu poderia usar funcionalidades bacanas sem quebrar o suporte cross-browser e sem adicionar cada prefixo de navegador existente. Também havia suporte para variáveis e aninhamento. Irado!

Para a maior parte, SASS tem sido ótimo… mas… eu ainda acho que meu ciclo de desenvolvimento é maior do que o necessário. É mais ou menos assim:

  1. Adiciono algum HTML
  2. Penso em bons nomes de classes
  3. Crio um arquivo CSS
  4. Adiciono estilos

Isso parece um ciclo razoável, mas sempre encontramos alguns problemas:

  1. Muitas classes pontuais que não se encaixam na categoria “reutilizável”
  2. Valores inconsistentes para todas as coisas ligadas a números: larguras, alturas, preenchimento, margem, altura da linha, etc.

Eu sei que existem sistemas por aí que servem para ajudar nessas questões — e eu usei alguns deles — mas eu nunca abandonei essas questões.

CSS-in-JS é maneiro

Certamente há benefícios utilizando styled-components e outras bibliotecas CSS-in-JS. O maior deles parece ser modularidade e reutilização, mantendo o escopo no componente. Eu usei styled-components para alguns projetos com uma resposta global positiva, mas ainda assim pareceu mais lento do que deveria.

E então… Tachyons!

De alguma forma eu tropecei em Tachyons e de quebra, no termo “CSS Funcional”.

CSS Funcional concentra-se em classes de estilo que têm uma responsabilidade única e que podem ser compostos.

Por exemplo:

.w1{
width: 10px; /* Não é um valor real do Tachyons */
}
.w2{
width: 30px;
}

Isso ajuda de várias maneiras:

  1. Mais ligeiro: nenhuma classes com uma tonelada de propriedades que são difíceis de anular.
  2. Sem alternância de contexto: depois de se familiarizar com os nomes curtos, você pode escrevê-los rapidamente sem sair do código da sua aplicação.
  3. Fácil refatoração: as classes de responsabilidade única são fáceis de misturar, combinar e reorganizar.

Dimensão e Ritmo

Tachyons faz um excelente trabalho em fornecer um pequeno número de boas opções para dimensionamento.

Por exemplo, você tem 5 opções para width: w1, w2, w3, w4, w5. Isso libera espaço mental que estava ocupado por contagem de pixels ou variáveis ​​SASS. Eu sei que se eu estiver especificando largura, vai ser entre w1 e w5 e w5 é a maior.

Isso produz réplicas pixel perfect do design? Talvez não, mas para a maioria dos casos de espaçamento, é perto o suficiente. Quando um elemento precisa ser perfeito, você sempre pode adicionar estilos adicionais para isso.

Design Responsivo

Tachyons vem com algumas media queries para isso:

  1. -ns: não-pequeno, not-small
  2. -m: médio, medium
  3. -l: grande, large

Ao adicionar esses modificadores às suas classes, você pode limitar o uso das classes para as medias declaradas.

Um exemplo eu uso muito:

<div className="pa3 pa5-ns">
Algum conteúdo
</div>

O div tem padding de nível 3 em telas pequenas e nível 5 em telas não pequenas (você pode encontrar os valores padrões do Tachyons em src/_variables.css). Com algumas combinações práticas, adicionei um comportamento responsivo a esse elemento. Bem legal!

Sendo feliz ao escrever CSS

Já construí algumas aplicações com Tachyons e descobri que sou capaz de criar e executar idéias de uma forma bem mais prática e rápida dessa maneira. Não é só isso, fiquei mais feliz com o resultado, tanto na aparência, quanto na manutenção.

E como “shippar” é o que importa, encontrei uma ferramenta confiável para entregar um futuro e previsível design.

⭐️ Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store