Executando verificação de segurança...
1
estevaog3
1 min de leitura ·

[AJUDA] como você faria o CSS deste projeto?

Boa tarde, galera.

Queria saber de você que trabalha ou já trabalhou no frontend com Bootstrap, SCSS, Jquery e afins (coisas de aplicações legado mesmo).

Meu cenário

Tenho experiência com Tailwind e achei muito bom usar os espaçamentos dele num outro projeto e também a paleta de cores (e.g.: text-blue-600).

Mas agora estou com um projeto em que estou tentando customizar o Bootstrap 5 com SCSS, e aí estou sentindo falta disso do Tailwind. Até criei um partial só com as larguras, para que eu possa usar, por exemplo w-10 e setar 40px de largura, pois o Bootstrap me obriga a trabalhar com grid e porcentagens para largura, mas precisei de um pouco mais de controle nisso.

O projeto também usa JQuery e Javascript, pois é da familiaridade da equipe e também uma engine de HTML para gerar as páginas.

Minhas dúvidas

Como você abordaria esse cenário? Acho que vou acabar criando um novo framework interno (com um pouco de Tailwind e Boostrap).

E quanto à metodologia de SCSS (BEM, ITCSS e etc)? Como você faria?

Existe alguma outra preocupação que devo ter?

Qualquer outro conselho ou dica é bem vindo!

Carregando publicação patrocinada...
2
adn

Dá uma olhada na documentação do próprio Bootstrap. Ele possui diversas classes utilitárias para definir largura, altura, margem, espaçamento por exemplo:
https://getbootstrap.com/docs/4.0/utilities/sizing/.
Não acho que precise recriar o tailwind dentro do Bootstrap. Procura aprender mais sobre ele e como ele resolve os problemas, no lugar de sempre tentar fazer como fazia com o tailwind. Ele é uma biblioteca bem rica e tem diversos recursos a sua disposição.

Trabalhei com o Bootstrap na versão 3 e depois trabalhei com Bulma. Também tinha essa impressão que precisava reinventar a roda no Bulma pois achava que faltavam recursos. Daí quando li a documentação vi que eu estava subutilizando a biblioteca.

Pelo que entendi você está criando uma biblioteca para a sua equipe usar, correto? O que vou pontuar abaixo fiz considerando isso :

  • Tenta manter o padrão de nomenclatura que o Bootstrap usa no lugar de adotar um novo (como o BEM). Isso vai reduzir muito a curva de aprendizado da sua equipe em relação aos recursos que você cria. Se adotar um padrão que nao é de conhecimento deles, eles terão mais uma coisa para aprender.
  • Cria uma documentação sobre os recursos que você implementa, um Readme, uma página, um documento no drive ou pode usar até mesmo uma aplicação como storybook. Define modelos de uso, boas práticas, como resolver problemas comuns e até mesmo limitações conhecidas. Isso dá ao time um local de consulta. Mantém atualizado e quando alguém te perguntar algo você pode enviar o link da documentação. Com isso eles aprendem a usar e confiar nela.
  • Cria recursos de divulgação de novos recursos (como apresentações, workshops, dojos, vídeos...) mostra como funciona e como eles aplicam no projeto. A informação não pode ficar só na sua cabeça.

Sucesso no seu projeto!