View não é lugar de JavaScript e CSS

Dicas de organização para programadores back-end que não manjam muito de front-end.

Eu não sou um programador de front-end, mas acompanhei a área por algum tempo e vejo meus colegas cometendo erros básicos que tornam um inferno a manutenção de um sistema. Falarei sobre alguns dos problemas mais recorrentes que vejo nas views dos projetos.

Quebras de linha não servem para separar parágrafos

A tag <br> serve para quebras linhas. Deve ser usada quando você quer pular uma linha sem abrir um novo parágrafo. Ao invés de usar duas tags <br><br> para separar dois parágrafos, envolva os dois blocos em tags <p>, pois elas existem exatamente para marcar parágrafos. Se o espaçamento não é o que você queria, use CSS para controlar melhor as margens.

Tabelas servem para mostrar dados tabulados, e não organizar elementos

Ok, essa é muito velha, mas ainda vemos muito em sistemas legados: tags <table> devem ser usadas para organizar dados tabulados (tabelas) e não para organizar a posição de itens de um formulário, elementos da interface, etc. Se quiser fazer isso, use <div> e CSS, ou quem sabe alguma tag mais adequada, como <nav>, <menu>, <section>, etc.

Use regras de CSS e não tags HTML para formatar a interface

HTML não serve para formatar, mas sim para demarcar um documento. Não use tags de cabeçalho (<h1>, <h2>, etc.) para obter um texto destacado em negrito, ou a tag <em> para obter um itálico. Faça isso com CSS.

Evite incluir tags HTML obsoletas ou que possuem uma alternativa melhor

O padrão mais recente da W3C é o HTML5. Com ele surgiram várias tags novas, como <section>, <article>, <progress>, <nav>. Você não precisa usar <div> para tudo, veja qual é a mais adequada.

Jamais escreva CSS inline

CSS inline é aquele que você inclui passando um atributo style para uma tag HTML, como por exemplo <div style="margin: 0 20px;">. Existem muitos motivos para não fazer isso, como por exemplo:

  • O estilo não pode ser reaproveitado em outras tags
  • O estilo pode causar conflito com regras de um arquivo CSS

Evite incluir CSS ou JavaScript no documento

Quando você abre tags <script> e <style> dentro da view, você descentraliza os estilos e scripts, não consegue reaproveitá-los e perde a oportunidade de compactá-los e cacheá-los no servidor. Procure sempre criar arquivos .css e .js para incluir o código.

Conclusão

Procure ler um pouco sobre HTML semântico e asset pipelines de frameworks para tentar organizar o seu front-end. Você poupará muito tempo ao dar manutenção nos seus sistemas e poderá aumentar pra caramba a velocidade de resposta do seu sistema.

Written by

Software development nerd. In 💙 with Ruby, PHP, JavaScript, Crystal, and other techy stuff.

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