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.
Nós nos preocupamos muito em seguir as melhores práticas de programação, aprender padrões de projeto, manter o código limpo, etc., mas às vezes deixamos a desejar no front-end.
O grande problema em não organizar o front-end é a dificuldade exponencial de mantê-lo a médio prazo. Caso você desenvolva páginas com conteúdo público, também existe o problema de sofrer penalidades no ranqueamento de ferramentas de busca (Google, Bing, etc.) por não usar as tags HTML adequadas para descrever o conteúdo.
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.
Lembre-se de que cada tag HTML tem um significado, <em> serve para dar ênfase a uma palavra, e não para aplicar o estilo itálico.
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.
Além disso, o HTML5 tornou obsoletas diversas tags e atributos, como <font> (pois formatação só deve ser feita com CSS), <center> (mesmo motivo), etc.
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 fica espalhado nos arquivos das views
- O estilo não pode ser reaproveitado em outras tags
- O estilo pode causar conflito com regras de um arquivo CSS
A solução é criar uma nova classe CSS, como por exemplo ".vertical-margin", e incluí-la em uma de suas folhas de estilo.
Existem casos em que o estilo será único e é um exagero extrair a regra para uma folha de estilos CSS separada. Nestes casos não existe um ganho real, mas é mais fácil seguir o padrão o tempo todo do que analisar cada exceção.
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.
Se o seu framework suportar, ative um compactador de assets (para unir vários arquivos em um só e reduzir seu tamanho) e configure adequadamente o cache do servidor (para só servir um novo CSS/JS caso algum tenha sido alterado) para aumentar drasticamente a velocidade de resposta.
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.
Se quiser se aprofundar no assunto, acompanhe estes websites:
Imagem do cabeçalho de Brennan Ehrhardt
