CSS Frameworks ou CSS Grid: o que devo usar no meu projeto?

Publicados: 2022-03-10
Resumo rápido ↬ Você já considerou se CSS Grid pode realmente substituir a necessidade de frameworks CSS ou bibliotecas de componentes de terceiros? Ao fazer isso, Rachel Andrew descobriu uma série de razões pelas quais as pessoas usam uma estrutura de terceiros e as coisas positivas e negativas de fazê-lo.

Entre as perguntas que me fazem com mais frequência está alguma variedade da pergunta: “Devo usar CSS Grid ou Bootstrap?” Neste artigo, vou dar uma olhada nessa questão. Você descobrirá que os motivos para usar frameworks são variados, e não simplesmente centrados no uso do sistema de grade contido naquele framework. Espero que, ao descompactar esses motivos, eu possa ajudá-lo a tomar sua própria decisão, em termos do que é melhor para os sites e aplicativos em que você está trabalhando e também para a equipe com a qual trabalha.

Neste artigo, quando falo sobre um framework , estou descrevendo um framework CSS de terceiros, como Bootstrap ou Foundation. Você pode argumentar que essas são realmente bibliotecas de componentes, mas muitas pessoas (incluindo seus próprios documentos) as descreveriam como uma estrutura, então é isso que usaremos aqui. O fator importante é que estes sejam algo desenvolvido externamente a você, sem referência aos seus problemas específicos. A alternativa para usar um framework de terceiros é escrever seu próprio CSS — isso pode envolver o desenvolvimento de seu próprio framework interno, usando vários arquivos comuns como ponto de partida ou criando cada projeto como uma coisa nova. Todas essas coisas são feitas em referência às suas próprias necessidades específicas, e não às muito genéricas.

Por que escolher um framework CSS?

A questão de usar Grid ou uma estrutura é falha, pois CSS Grid não é um substituto imediato para as coisas que uma estrutura CSS faz. Qualquer exploração do assunto precisa considerar o que do nosso framework CSS Grid irá substituir. Eu queria começar descobrindo por que as pessoas escolheram usar um framework CSS. Então eu virei para o Twitter e postei este tweet.

Foram muitas as respostas. Como eu esperava, há muito mais razões para usar um framework do que simplesmente o sistema de grade que ele contém.

Mais depois do salto! Continue lendo abaixo ↓

Uma estrutura fornece documentação pronta para sua equipe

Se você estiver trabalhando em um projeto com vários outros desenvolvedores, qualquer sistema interno que você criar também precisará incluir documentação para ajudar os membros de sua equipe a usá-lo de forma eficaz. A criação de documentação útil é um trabalho demorado e qualificado por si só, e algo que os grandes frameworks fazem muito bem.

Captura de tela da página inicial da documentação do Bootstrap
A Documentação do Bootstrap. (Visualização grande)

A documentação do framework surgiu de novo e de novo, com muitos desenvolvedores front-end experientes participando e explicando que é por isso que eles recomendam e usam um framework CSS. Às vezes, ouço a opinião de que as pessoas estão usando frameworks porque realmente não conhecem CSS, muitas das pessoas que respondem, no entanto, são bem conhecidas por mim como desenvolvedores especialistas em CSS. Tenho certeza de que às vezes eles ficam frustrados com as escolhas feitas pelo framework, no entanto, os aspectos positivos dessa escolha superam isso.

Comunidades on-line: acesso fácil à ajuda

Quando você decide usar uma determinada ferramenta, você também ganha uma comunidade de usuários para pedir ajuda. A menos que você tenha um problema de CSS muito claro e possa produzir um caso de uso reduzido para demonstrá-lo, pedir ajuda com CSS pode ser difícil. É especialmente assim se você quiser perguntar como abordar a construção de um determinado componente. O uso de uma estrutura pode fornecer um ponto de partida para sua pergunta; em geral, você perguntará como modificar ou estilizar um componente específico em vez de começar do zero. Esta é uma coisa mais fácil de perguntar, bem como uma coisa mais fácil de responder.

O sistema de grade

Apesar de termos CSS Grid, muitas pessoas responderam que a principal razão pela qual decidiram usar um framework foi para o sistema de grid. É claro que muitos desses projetos podem ter sido iniciados muito antes do CSS Grid estar disponível. Ainda hoje, no entanto, as preocupações com a compatibilidade com versões anteriores ou a compreensão da equipe de métodos de layout mais recentes podem fazer com que as pessoas decidam usar uma estrutura em vez de adotar CSS nativo.

Velocidade de entrega do projeto

Optar por um framework, em geral, tornará muito mais rápido entregar seu projeto, especialmente se esse projeto se encaixar muito bem com a maneira como o framework faz as coisas e não precisar de muita personalização.

No caso de desenvolver um MVP para uma nova ideia, um framework pode ser uma excelente escolha. Você terá muitas coisas para gastar tempo e ainda estará testando suposições em termos do que o projeto precisa. Ser capaz de desenvolver essa primeira versão usando uma estrutura pode ajudá-lo a colocar o produto na frente dos usuários mais rapidamente e economizar muito tempo desenvolvendo coisas que você decide não usar.

Outro lugar onde a velocidade e um monte de componentes prontos podem ser muito úteis ao desenvolver o sistema de administração de back-end para um site ou aplicativo. No caso de você simplesmente precisar criar algumas telas de administração, um framework pode economizar muito tempo estilizando campos de formulário e outros componentes! Existem até temas de painel para Bootstrap e Foundation que podem fornecer um ponto de partida útil.

Captura de tela de um kit de painel para o Foundation
Coleções de componentes do painel tornam mais rápido criar o administrador de um aplicativo. (Visualização grande)

Eu não sou um desenhista!

Este ponto é a razão pela qual optei por um framework CSS no passado. Eu não sou um designer, e se eu tiver que projetar e construir algo, passarei muito tempo tentando tomar decisões de design que não estou qualificado para tomar. Seria ótimo ter os fundos para contratar um designer para cada projeto paralelo, no entanto, eu não tenho, e então uma estrutura pode significar a diferença entre enviar a coisa ou não.

Lidando com bugs de CSS e problemas de compatibilidade do navegador

Mencionado menos do que eu pensei que poderia ser foi o fato de que os autores do framework já teriam lidado com problemas do navegador, seja devido a bugs reais ou falta de suporte para certos recursos. No entanto, isso ainda era um fator na tomada de decisão para muitas pessoas.

Para ajudar no design responsivo

Isso surgiu algumas vezes; as pessoas estavam optando por um framework especificamente devido ao fato de ser responsivo, ou porque eu tomei decisões sobre pontos de interrupção para eles. Achei interessante que isso especificamente fosse algo apontado como um fator na escolha de usar um framework.

Por que não usar um framework?

Entre as razões positivas pelas quais os frameworks foram selecionados estão alguns dos problemas que as pessoas tiveram com essa escolha.

Dificuldade de substituir o código da estrutura

Muitas pessoas comentaram sobre o fato de que poderia se tornar difícil substituir o código usado no framework, e que os frameworks eram uma boa escolha se não precisassem de muita substituição. Os benefícios da facilidade de uso e a compreensão de todos na equipe como usar a estrutura podem ser perdidos se houver um grande número de personalizações em vigor.

Todos os sites acabam parecendo o mesmo

A culpa por todos os sites começarem a ter a mesma aparência foi colocada diretamente na porta dos conhecidos frameworks CSS. Eu vi sites onde tenho certeza que um certo framework foi usado, então descobri que eles são CSS customizados, então prevalecem as escolhas de design feitas nesses frameworks.

A dificuldade em substituir os estilos de estrutura já mencionados é uma grande parte do motivo pelo qual os sites desenvolvidos usando uma estrutura específica tendem a parecer semelhantes. Esta não é apenas uma questão criativa, pode ser muito estranho que um usuário de alguns sites que optaram pela mesma estrutura sinta que são todos a mesma coisa. Em termos de transmitir sua marca e fazer parte disso uma boa experiência do usuário, talvez você perca algo ao optar pelas opções genéricas de um framework.

Herdando os problemas CSS do mundo inteiro

Seja front-end ou back-end, qualquer ferramenta ou framework que busque atingir o mainstream precisa resolver o maior número possível de problemas. A menos que a ferramenta seja fortemente acoplada à solução de um caso de uso específico, ela conterá muito código muito genérico e código que resolve problemas que você não tem e nunca terá.

Você pode estar na posição afortunada de precisar apenas que sua experiência completa seja visualizada nos navegadores mais atuais, permitindo uma experiência mais limitada no Internet Explorer ou em versões mais antigas do Chrome. Usar uma estrutura com muito suporte integrado ao IE9 resultaria em muito código adicional - especialmente devido às melhorias no layout CSS recentemente. Também pode impedir que você seja criativo, pois tudo na estrutura está assumindo esse requisito de suporte. Coisas que são possíveis usando CSS podem ser limitadas pelo framework.

Como exemplo, os sistemas de grade em estruturas populares não têm a capacidade de abranger linhas, pois não há nenhum conceito ou linhas em sistemas de layout anteriores ao Grid Layout. CSS Grid Layout permite isso facilmente. Se você estiver vinculado ao Bootstrap Grid e seu designer apresentar um design que inclua elementos que abrangem linhas, você não poderá implementá-lo - apesar do fato de o Grid poder ser suportado por seus navegadores de destino.

Problemas de desempenho

Relacionados ao acima estão os problemas de desempenho inerentes ao uso de código bastante genérico, em vez de algo otimizado para os casos de uso exatos que você possui. Ao tentar melhorar o desempenho, você vai se deparar com as decisões da estrutura.

Aumento da dívida técnica

Embora uma estrutura possa ser uma ótima maneira de fazer sua startup decolar rapidamente e, no momento de tomar essa decisão, você tiver certeza de que a substituirá, existe um plano para que isso aconteça?

Aprendendo um framework ao invés de aprender CSS

Ao conversar com participantes de conferências e workshops, descobri que muitas pessoas usaram apenas um framework para escrever CSS. Não há nada de errado em entrar no desenvolvimento web por meio de uma dessas ferramentas, dada a complexidade da plataforma web hoje, imagino que será o caminho para muitas pessoas. No entanto, pode se tornar uma escolha limitadora de carreira, especialmente se a estrutura em que você baseou suas habilidades cair em desuso.

Ter desenvolvedores front-end sem conhecimento de CSS deve preocupar uma empresa. Torna-se incrivelmente difícil se afastar desse framework se sua equipe não entender realmente como fazer CSS sem ele. Embora isso não seja realmente uma razão para não usar um framework, é algo a ter em mente ao usar um. Quando chegar o dia de se mudar, você esperaria que a equipe estivesse pronta para assumir algo novo, sem precisar lembrar (ou aprender pela primeira vez) como escrever CSS!

A escolha não considera os usuários finais

Nicole Sullivan fez praticamente a mesma pergunta alguns dias antes da minha pergunta quando eu estava pensando em escrever este artigo, embora ela estivesse considerando os frameworks front-end como um todo, em vez de apenas os frameworks CSS. Jeremy Keith observou que exatamente zero das respostas dizia respeito aos usuários finais. Este também foi o caso com as respostas à minha pergunta.

Em nossa corrida para construir nosso site rapidamente, nosso desejo de tornar as coisas o melhor possível para nós mesmos como designers e desenvolvedores do site, esquecemos para quem estamos fazendo isso? As decisões tomadas pelo desenvolvedor do framework correspondem às necessidades dos usuários do site que você está construindo?

Podemos substituir os frameworks por CSS “Vanilla”?

Se você está pensando em substituir sua estrutura ou iniciar um novo projeto sem uma, quais são algumas das coisas que você poderia considerar para tornar esse processo mais fácil?

Entenda quais partes da estrutura você precisa

Se você estiver substituindo o uso de um framework por seu próprio CSS, um bom ponto de partida seria auditar seu uso do framework atual. Descubra o que você está usando e por quê. Considere como você substituirá essas coisas no novo design.

Você pode seguir um processo semelhante ao pensar em selecionar uma estrutura ou escrever a sua própria. Quais partes disso você poderia razoavelmente esperar precisar? Quão bem ele se encaixa com suas necessidades? Haverá muito código que você importa, potencialmente pede aos visitantes para baixar, mas nunca usa?

Crie uma biblioteca de padrões documentada ou um guia de estilo

Eu sou um grande fã de trabalhar com bibliotecas de padrões e você pode ler meu post aqui na Smashing Magazine sobre o uso do Fractal. Uma biblioteca de padrões ou um guia de estilo permite a criação de documentação junto com todos os seus componentes. Começo todos os meus projetos trabalhando no CSS na biblioteca de padrões.

Você ainda precisará escrever a documentação, como alguém que escreve documentação, no entanto, sei que muitas vezes o mais difícil é saber por onde começar e como estruturar a documentação. Uma biblioteca de padrões ajuda com isso mantendo os documentos junto com o CSS para o próprio componente. Essa abordagem também pode ajudar a evitar que os documentos fiquem desatualizados, pois estão fortemente vinculados ao componente ao qual se referem.

Desenvolva suas próprias diretrizes de código CSS

A consistência em toda a equipe é incrivelmente útil e, sem uma estrutura, pode não haver nada ditando isso. Com métodos de layout mais recentes, em particular, geralmente há várias maneiras de criar um padrão, se todos escolherem um diferente, é provável que as inconsistências surjam.

Melhores lugares para pedir ajuda

Além de enviar pessoas na direção do Stack Overflow, parece que há muito poucos lugares para pedir ajuda no CSS. Em particular, parece haver poucos lugares acessíveis para iniciantes. Se quisermos incentivar as pessoas a se afastarem das ferramentas de terceiros, precisamos preencher essa necessidade de suporte amigável e útil que vem das comunidades em torno dessas ferramentas.

Dentro de uma empresa, é possível que desenvolvedores mais experientes possam se tornar o suporte de CSS para membros mais novos da equipe. Ao mudar de uma estrutura para sua própria solução, seria sensato considerar qual treinamento pode ser necessário para ajudar a preencher a lacuna, especialmente se as pessoas estiverem acostumadas a usar a ajuda fornecida em torno da ferramenta de terceiros quando precisaram de ajuda no passado .

Guias de estilo ou pontos de partida para não designers

Eu me amarro em questões como: “Quais fontes devo usar?”, “Qual deve ser o tamanho dos títulos em relação ao corpo do texto?”, “É bom usar uma sombra projetada?” Eu posso facilmente escrever o CSS — se eu souber o que estou tentando fazer! O que eu realmente preciso são algumas regras para fazer um design não terrível, algum tipo de ponto de partida de tipografia ou um conjunto de diretrizes básicas que substituam a capacidade de usar os padrões de um framework em muitos casos.

Educando as pessoas sobre o estado da interoperabilidade dos navegadores modernos

Descobri que as pessoas que estiveram imersas no desenvolvimento baseado em framework por vários anos, muitas vezes têm uma visão da interoperabilidade do navegador que está desatualizada há vários anos. Nunca estivemos em uma situação melhor em termos de CSS trabalhando em vários navegadores. Pode ser que alguns navegadores não suportem um novo e brilhante pedaço de CSS, mas em geral, CSS (quando suportado) não estará cheio de bugs estranhos. Por exemplo, em quase todos os casos, se você usar CSS Grid em um navegador, seu CSS funcionará exatamente da mesma maneira em outro.

Se estiver tentando defender o não uso de uma estrutura para membros da equipe que acreditam que a estrutura os salva de bugs do navegador, esse ponto pode ser útil para levantar. Os problemas de compatibilidade do navegador são reais ou baseados em preocupações do passado?

Veremos uma nova geração de frameworks?

Algo que me interessa é se nossos novos métodos de layout ajudarão a inaugurar uma nova geração de ferramentas e estruturas. Veremos ferramentas que tiram proveito de novos métodos de layout, permitem mais criatividade, mas ainda dão a equipes e indivíduos algumas das vantagens inegáveis ​​que surgiram das respostas ao meu tweet.

Talvez contando com novos métodos de layout, em vez de um sistema de grade embutido, uma estrutura de novo estilo possa ser muito mais leve, tornando-se uma coleção de componentes úteis. Pode ser capaz de fugir de alguns dos problemas de desempenho inerentes ao código muito genérico.

Uma área em que um framework poderia ajudar seria ajudar a criar fallbacks sólidos para navegadores que não suportam métodos de layout mais recentes, ou ter uma acessibilidade realmente sólida incorporada aos componentes. Isso pode ajudar a fornecer orientação sobre uma maneira de trabalhar que considere a interoperabilidade e a acessibilidade, mesmo para aquelas pessoas que não têm essas coisas em mente.

Eu não acho que simplesmente mudar o Bootstrap Grid para CSS Grid Layout vai conseguir isso. Em vez disso, os autores que apresentam novos frameworks, talvez devam olhar para alguns dos motivos descritos aqui e tentar resolvê-los de novas maneiras, usando a nova funcionalidade que temos no CSS para fazer isso.

Você deve usar um framework?

Você e sua equipe precisarão responder a essa pergunta por conta própria. E, apesar do que as pessoas possam tentar fazer você acreditar, não existe uma resposta universal certa ou errada. Existe apenas o que é certo ou errado para o seu projeto. Espero que este artigo e as muitas respostas à minha pergunta original possam lhe dar algumas coisas para discutir enquanto você pondera sobre essa pergunta.

Lembre-se de que a resposta mudará com o tempo. Pode ser uma experiência de pensamento útil não apenas considerar o que você precisa agora, em termos de inicialmente fazer o desenvolvimento do site, mas considerar a vida útil do site. Você espera que isso ainda esteja por aí em cinco anos? A sua escolha será positiva ou negativa então?

Documente suas decisões, não tenha medo de revisitá-las e certifique-se de que você e sua equipe mantenham suas habilidades fora de qualquer estrutura que você decida usar. Dessa forma, você estará em um bom lugar para seguir em frente no futuro e tomar as melhores decisões para as próximas fases do seu projeto.

Eu adoraria que a conversa iniciada naquele tweet continuasse. Deixe-nos saber suas histórias nos comentários – eles podem ajudar outras pessoas a tentar descobrir o que é melhor para seus projetos agora.