Após anos de desenvolvimento, decidimos padronizar a interface do usuário de um de nossos produtos mais importantes –  nosso painel multiaplicativo.  Fizemos isso para nossos clientes e usuários internos (facilidade de uso), bem como para nossa equipe de produto (processo de design, tomada de decisão e codificação mais fáceis). Também precisávamos nos alinhar de forma mais consistente com a marca da nossa empresa.  Para isso, construímos um   , chamado Satélite. sistema de design interno  Ao desenvolver o Satellite, analisamos diferentes soluções CSS para a biblioteca de interface do usuário, todas com seus prós e contras:   ,   ,   . Saas módulos css css-in-js  Depois de considerar frameworks semelhantes ao Bootstrap, optamos pelo framework   . Por quê? CSS Tailwind CSS  CSS puro (sem tempo de execução JS) – bom para desempenho.  Tende a gerar arquivos de folha de estilo CSS menores (após a limpeza) – também bom para o desempenho.  Sem alternar entre um arquivo CSS e seu código javascript durante o desenvolvimento de novos componentes.  Não perca tempo tentando encontrar bons nomes para classes utilitárias.  Ajuda a promover a consistência da interface do usuário.  Permite definir uma coleção de espaçamentos e cores que mapeiam bem os tokens de design (uma “Paleta restrita”).  No entanto… havia uma desvantagem no Tailwind:   A sopa de Tailwind pode ser difícil de digerir quando você não está acostumado com seus nomes de classe. a legibilidade de componentes complexos.  Em nosso caso, ficou pior porque tivemos que usar uma versão prefixada das classes CSS (   ) para evitar conflitos com nosso CSS legado, adicionando ainda mais ruído e comprimento às nossas strings de nome de classe. stl-  Este artigo mostra como mitigamos o problema de legibilidade. Para começar, usamos várias técnicas de desenvolvimento web, como literais marcados e interpolação, para encurtar o comprimento de nossas strings.  Então simplificamos o uso dos nomes das classes com a ferramenta linter ESLint, fornecendo um DX melhor com duas ferramentas:  Um plug-in ESLint, porque não havia um   na época. plug-in oficial ESLint-Tailwind  Uma extensão do Visual Studio Code para simplificar o uso, fornecendo intellisense das várias classes do Tailwind. A   não funcionou para nós porque esperava que um arquivo de configuração (   ) estivesse presente no projeto, enquanto usávamos uma versão pré-construída na época. Entre outras tarefas, precisávamos do VS para trabalhar com nosso arquivo de configuração. extensão oficial do ESLint VS tailwind.config.js  Isso é mais ou menos o pano de fundo. Agora vamos entrar na implementação.   Tailwind – Nomes de classe são bons, mas podem ser complexos   Os nomes das classes são bons  Uma estrutura CSS de utilitário como o   vem com um grande conjunto de classes de utilitários pré-existentes que você pode usar diretamente em seu HTML e JavaScript. Essas classes permitem a consistência em todo o código. Tailwind  E eles são totalmente configuráveis: com os mesmos nomes de classe, poderíamos facilmente marcar nosso aplicativo com variantes. Portanto, o uso de nomes de classe Tailwind CSS nos permitiu criar um conjunto consistente de cores, espaçamento, fontes - essencialmente, tudo CSS - e implementou um sistema de design fácil de implementar.   Mas as classes Tailwind podem se tornar complexas  Queríamos simplificar nosso uso das classes do Tailwind.  Para isso, usamos técnicas como literais de template marcados, interpolação e condições.  Começamos com uma longa sequência de classes CSS como as seguintes:   const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';  Mas logo percebemos que isso não era fácil de ler. Além disso, continha ruído desnecessário, como o prefixo   , usado para evitar conflitos com outras classes. stl-  Portanto, contamos com a ajuda de   para remover o prefixo da string. Criamos uma     : literais de modelo marcados tag stl   const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';   Finalmente, queríamos mais legibilidade. Então adicionamos:  Linhas separadas para maior legibilidade e agrupamento de elementos comuns  Interpolação com literais de modelo marcados embutidos  Condições para um estilo mais poderoso e adaptável  O resultado é um elegante pedaço de código (CSS):   const className = stl ' inline-flex items-center justify-center h-10 w-10 ${round && 'rounded-full'} ${iscool ? 'bg-blue-100' : 'bq-red-100'} ;   ESLint – Corrigindo Erros Humanos Sem Esforço  Elegância é uma coisa. O correto é outro. É fácil soletrar incorretamente as classes, especialmente quando há muitas classes para aprender inicialmente no Tailwind.  Aqui está um exemplo do que pode dar errado:   cost className = stl 'felx space-between text-gray-200';  Você consegue identificar os erros?  Trocando letras (felx por flex)  Classes incompletas ou inexistentes (espaço intermediário)  Ortografia americana vs britânica (cinza)   ESLint to the Rescue – Criando um plug-in ESLint  Precisávamos verificar se as classes que as pessoas usavam eram as corretas. Portanto, usamos a ferramenta linter   para analisar o código, analisá-lo e relatar erros. ESLint  Criamos um plug-in ESLint para qualidade de código e para relatar erros em nomes de classes que não existiam.      Aqui está o código ESLint central que faz a validação:  ESLint usa uma árvore de sintaxe abstrata (AST) que dá acesso a linhas individuais de código.  O AST basicamente converte as strings do código em nós, que você pode analisar como coleções e elementos.  Aqui está o detalhamento de como o ESLint analisa o código. A expressão inteira é um   do tipo   :  node VariableDeclataion  Queremos analisar a expressão do lado direito,   . TaggedTemplateExpression  Como você pode ver, há um callback que lida com esse tipo de expressão:   No retorno de chamada   , coletamos todas as strings desse modelo. Por exemplo: TaggedTemplateExpression  O    TemplateElement  os    Literals  Depois que a coleta é concluída, há outro retorno de chamada registrado que percorre os nomes de classe coletados e confirma se eles existem.  Ele faz isso com a coleção   :  validClassNames  É isso.  Sabíamos imediatamente que criar esse plug-in de validação era a coisa certa a fazer, porque na verdade encontramos alguns erros ortográficos em nosso sistema, bem como na base de código do painel existente!   Propondo sugestões com nossa extensão ESLint VisualStudio  A última ferramenta que criamos foi uma extensão no Visual Studio Code. Usando a mesma lógica do nosso plug-in, o ESLint sugere classes typescript conforme o desenvolvedor digita.  Esse intellisense evita que os desenvolvedores tenham que adivinhar ou acessar o site do Tailwind para pesquisar e encontrar as classes corretas.   Como você pode ver no GIF, ele não apenas propõe nomes de classes, mas também exibe as cores ou ícones úteis para cada sugestão.  Com Tailwind CSS e ESLint, conseguimos impor nossos padrões (acessíveis internamente no Github) melhorando o DX na implementação deles.

Visit us

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Como simplificar Tailwind CSS usando ESLint, Tagged Template Literals e muito mais!

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps