As 5 principais ferramentas de CSS para desenvolvedores e designers da Web

O CSS percorreu um longo caminho, mas as ferramentas em torno dele ainda não foram.


Se você acha que escrever CSS é como lutar contra monstros em um poço de alcatrão, você não está sozinho. Embora o CSS seja uma das tecnologias mais fundamentais que impulsionam a Web, não é uma linguagem ou estrutura de programação adequada em si. Como resultado, assim que o seu projeto começa a ficar mais proeminente, o mesmo acontece com a bagunça – as regras do seletor parecem estar por todo o lado e é difícil encontrar o que é onde; À medida que você inclui fontes, CSS externo, JS e outros ativos em suas páginas, o tamanho final do pacote parece aumentar de maneira improvável e você se pergunta onde os ideais de front-ends rápidos e fáceis de usar se perderam.

Mas não precisa ser assim. Hoje, as ferramentas em torno do CSS evoluíram para um nível em que o fluxo de trabalho não pode apenas ser domado, mas também agradável. Neste artigo, vou falar sobre cinco dessas ferramentas de CSS que achei de imenso valor em meu trabalho. Evitei conscientemente, incluindo ferramentas de “brinquedo”, como geradores de CSS, geradores de menu etc., porque eles criam mais problemas do que resolvem.

O trem CSS está chegando! Vamos lá! �� ��

PostCSS

Se você gosta de JavaScript, adora a ideia de que agora podemos adicionar e controlar CSS por meio de JavaScript. E essa é exatamente a capacidade que PostCSS fornece.

No entanto, não se trata apenas de açúcar de sintaxe baseado em JavaScript sobre CSS. O PostCSS agrupa vários pacotes / recursos poderosos, resultando em um fluxo de trabalho muito mais agradável e fácil ao lidar com CSS. Por exemplo:

  • Os prefixos do fornecedor são adicionados automaticamente com base na propriedade que você está usando.
  • A capacidade de detectar quais recursos CSS podem ser usados ​​no navegador atual.
  • Usando as próximas atualizações de sintaxe ainda não lançadas, mas muito poderosas, para CSS.
  • Uma grade responsiva, tão flexível quanto possível.

Acho que não farei justiça ao PostCSS se não incluir o exemplo da grade. Aqui vamos nos. Algo tão simples como este:

div {
coluna perdida: 1/3
}

é convertido em um sistema CSS completo, com quase todos os casos extremos atendidos:

div {
largura: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: enésimo filho (1n) {
flutuar: esquerda;
margem direita: 30 px;
claro: nenhum;
}
div: último filho {
margem direita: 0;
}
div: enésimo filho (3n) {
margem direita: 0;
flutuador: direito;
}
div: enésimo filho (3n + 1) {
limpar ambos;
}

Como é uma coisa orientada a JS, o PostCSS não é exatamente fácil de configurar, especialmente se você é um designer e não teve muito a ver com módulos, empacotadores e o mundo da NPM em geral. Dito isto, o potencial do PostCSS no seu trabalho é enorme e não deve ser negligenciado.

PurgeCSS

Você ama o fluxo de trabalho moderno baseado na estrutura de front-end, mas está frustrado por trazer muita bagagem? Se sim, PurgeCSS é seu amigo, pelo menos na medida em que CSS é considerado.

Para quem pode não saber qual é o grande problema: aqui está um resumo rápido. Quando você cria aplicativos de página única usando estruturas de front-end como React, Angular, Vue etc., passa pelo que é chamado de “processo de criação”. Essencialmente, você codifica todos os seus CSS, JS, SASS etc. em arquivos separados (organizando-os conforme achar mais intuitivo), mas depois de concluir, você instrui o empacotador a “construir” a coisa. O que isso faz é ler todo o código fonte que você escreveu, aplicar vários filtros a ele (minificação, ofuscação / uglificação etc.) e cuspir a saída em arquivos únicos, geralmente “app.js” para todo o JavaScript, e “App.css” para todo o CSS. Esses arquivos, juntamente com um “index.html” básico, são tudo o que você precisa para executar o front-end do aplicativo. A desvantagem é que, como tudo é incluído nesses arquivos finais, seu tamanho geralmente se estende além do que é permitido para um tempo de resposta rápido; por exemplo, não é incomum ver um “app.js” com mais de 500 KB!

O PurgeCSS é adicionado como parte do seu fluxo de trabalho de construção e evita que o CSS não utilizado seja empacotado na saída final. Um caso de uso típico é o Bootstrap: é uma biblioteca de tamanho médio com várias classes de interface do usuário para diferentes componentes. Se seu aplicativo usa, digamos, 10% das classes do Bootstrap, o restante 90% é o único inchaço no seu arquivo CSS final. Porém, graças ao PurgeCSS, esses arquivos CSS não utilizados podem ser identificados e impedidos de construir, resultando em arquivos CSS finais muito menores (a redução de tamanho de 5 a 6 vezes é bastante normal).

Então, vá em frente, “limpe” CSS desnecessário com PurgeCSS! ��

Vento de cauda

Vento de cauda é uma estrutura CSS, mas é tão contrária que pensei em incluí-la aqui entre as ferramentas CSS. Se você odeia CSS embutido (quem não ?!), o Tailwind provavelmente fará com que você recue horrorizado na primeira vez que o encontrar. Vamos experimentar primeiro como você pode codificar um formulário típico usando o CSS Tailwind:

Nome do usuário

Senha

Por favor escolha uma senha.

Assinar em


Esqueceu a senha?

© 2019 Acme Corp. Todos os direitos reservados.

“Isso é uma piada ou o que?! Quais são todas essas turmas chatas? Após uma inspeção mais detalhada, por que diabos estou definindo as margens, o preenchimento e a cor diretamente junto com o HTML? É 2019 ou o quê? ”

Pensamentos como esses são esperados. Eu sei porque senti o mesmo e imediatamente fechei a tampa do Tailwind. Foi só até mais tarde que me deparei com um podcast em que o convidado havia refeito um site moderno e de tamanho decente em Tailwind que comecei a prestar atenção..

Antes de avançarmos, considere estas perguntas:

  • Você está cansado de memorizar classes de estrutura padrão e suas funções para que você possa personalizar seus projetos ao seu gosto? Um bom exemplo é mudar a aparência e o comportamento da barra de navegação do Bootstrap.
  • Você acha que estruturas populares como o Bootstrap são um exagero e tentam fazer muito mais do que deveriam?
  • Você se encontra misturando estruturas porque deseja o melhor de todos os mundos?
  • Você gostaria de ter mais controle sobre seus projetos e ainda achar a experiência de baunilha CSS esmagadora?

Se a resposta para qualquer uma dessas perguntas for “sim”, você precisará muito do Tailwind. Agora vamos dar uma olhada no que é Tailwind e o que faz.

Tailwind é o que chamamos de CSS de primeiro utilitário, que difere do que fazemos em nossos fluxos de trabalho diários: CSS semântico. A diferença entre CSS semântico e CSS utilitário é que o primeiro tenta agrupar elementos de estilo pelo nome das seções visuais que aparecem na página. Portanto, se você tiver um menu de navegação, cartões, carrossel etc. em uma página, a maneira semântica de fazer as coisas seria agrupar regras de estilo CSS em classes como .nav, .card, .carousel etc., que suas subseções rotuladas de acordo (por exemplo, .card-body, .card-footer, etc.). Essa é de longe a abordagem mais comum ao CSS, e todos nós a conhecemos por meio de estruturas como Bootstrap, Foundation, Bulma, UI Kit, etc..

Por outro lado, o estilo “utilitário” de escrever classes de nomes CSS precisamente de acordo com sua função: uma classe que controla a margem para os lados superior e inferior será nomeada como .margin-y-medium e pode ser aplicada em qualquer lugar do HTML marcação onde essa margem é necessária. Embora isso introduza um pouco de creep de nome de classe (basta dar uma olhada rápida no código que compartilhei anteriormente ou na captura de tela – tantas classes!), A intenção do CSS é clara: você não precisa pular entre a documentação, seu CSS e seu HTML para descobrir os nomes certos e o efeito certo.

É uma maneira muito libertadora de trabalhar, mas também há um problema: você precisa ter noções básicas de CSS corretamente (incluindo conceitos modernos como o Flexbox). Isso ocorre porque o Tailwind não oferece estilos prontos para qualquer componente da sua página e cabe a você construir os estilos a partir dos blocos de construção fornecidos. Outro problema é o da instalação: o Tailwind permite agrupar várias classes CSS nos chamados componentes, mas é feito por meio de JavaScript e requer um carregador e empacotador de módulos como o Webpack..

Tudo dito e feito, o Tailwind é uma nova e impressionante maneira de fazer estilo, e atrairá aqueles que desejam maior simplicidade e controle.

Saas

Apesar Sass já existe há muito tempo, incluí-o aqui porque os desenvolvedores ainda não sabem o quanto é útil. Stylistically Awesome Style Sheets (ou SASS) é um superconjunto de CSS que foi desenvolvido para domesticar a loucura que se arrasta no projeto, uma vez que o CSS cresce além de algumas linhas.

Imagine isto: você percorreu um longo caminho escrevendo o CSS para seu projeto. Você está usando algumas cores, descobriu algumas margens sensíveis para vários divs, estilos de fonte e assim por diante. Só que agora você percebe que nem tudo está tão bem. Talvez você queira experimentar margens maiores para todas as seções, cartões e botões. Bem, e agora? Mesmo a própria idéia de ter que procurar e substituir o arquivo CSS gigante é suficiente para causar uma dor de cabeça. Todos nós já fizemos isso e todos sabemos como é propenso a erros. Sass resolve esse problema introduzindo variáveis:

Quando escrevemos HTML, aninhamos elementos dentro de outros elementos. Porém, ao escrever CSS, temos que escrever uma hierarquia simples de regras, o que dificulta o “ajuste” mental do CSS no HTML. Com o Sass, você pode imitar a estrutura da página dentro dos arquivos de estilo:

Tudo isso nem começa a arranhar a superfície dos presentes que a Sass oferece: design modular, inclui arquivos, mixins, herança. . . A lista continua e continua. Claro, você precisará aprender um fluxo de trabalho do compilador Sass e incluí-lo no seu, mas, na minha opinião, essas duas horas gastas são um investimento que o pagará repetidamente!

Linters CSS

Como web designers (e desenvolvedores de interface do usuário – embora eu me pergunte como esses dois termos são diferentes) usam editores de texto simples – ou, como é o caso hoje em dia, codificam diretamente nas ferramentas de desenvolvimento do Chrome – eles raramente conseguem ouvir ou se beneficiar de um linter. Por outro lado, programadores que usam bons editores de texto como VS Code, Sublime Text ou outros IDEs conhecem essa ferramenta muito bem, pois é uma segunda natureza para eles. De qualquer forma, o ponto é que, se você é um daqueles desenvolvedores de CSS que se afoga em CSS confuso, pode se beneficiar de um linter.

Simplificando, um linter é um programa que verifica seu código quanto a erros e inconsistências. Isso é feito com a ajuda de um conjunto de regras para descobrir o que está errado e o que é inconsistente. Bons alinhadores integram-se a IDEs e editores de código e podem ser configurados para execução sempre que você salvar o arquivo de origem. Eles também ajudam você com visualizações de cores, erros e preenchimento automático enquanto você compõe seus arquivos CSS:

Mas aqui está a melhor parte: se você seguir um estilo e formatação CSS específicos, poderá ajustar o linter para sua satisfação. Isso garante que o CSS em um projeto siga o mesmo guia de estilo (o linter também pode ser configurado para formatar automaticamente o arquivo a cada salvar / confirmar o código-fonte). Portanto, esteja você trabalhando em equipe ou sozinho, um interlocutor é sempre um ótimo complemento para o fluxo de trabalho do seu projeto.

Conclusão

Tenho certeza de que você já está convencido de que o desenvolvimento moderno de CSS está muito longe da abordagem do passado. ��

Dito isto, admitirei algo novamente, mesmo que pareça um disco quebrado: algumas das ferramentas que abordamos neste artigo não são fáceis de configurar, especialmente se você não estiver em termos amigáveis ​​com o ecossistema npm . Mas antes que você sinta nojo e vire o rosto, diga-me o seguinte: o CSS foi fácil quando você foi o primeiro Aprendendo isto? Foi fácil aprender a centralizar uma div, a dominar as mudanças de humor dos carros alegóricos e assim por diante? Da mesma forma, as ferramentas que descrevi aqui têm alguma curva de aprendizado, mas valem a pena.

Honestamente, depois de começar a experimentar os resultados, você se arrependerá por não fazer isso antes. E não vamos subestimar a importância do CSS que é modular, enxuto e bem organizado!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map