Essa é uma lista de coisas a se pensar na hora de criar um projeto front-end. Ela foi baseda na lista criada pelo meu colega Ignacio Duarte. A idéia é manter essa lista sempre atualizada e que ela seja um guia rápido de referência quando se está pensando em um projeto de front-end.

Documentando o código

Uma das maneiras mais fáceis de melhorar a comunicação entre desenvolvedores front-end e backend é criando um guia de estilo (Exemplos starbucks, Github ou Hackerhires) — essa é uma das principais razões pela qual o bootstrap está sendo tão usado.

Ferramentas que ajudam na criação de um guia de estilo:

• Kneath é uma metodologia de documentação de CSS e geração de guia de estilos.
• Nadarei KSS é a versão do Kneath KSS para Rails.
• Kalei styleguide é uma solução client-side usando backbone, então não é necessário manter um servidor.
• Pears usa wordpress e um tema específico para criar guia de estilos.
• Styledocco usa NodeJS e Markdown para gerar guia de estilos em HTML e documentação.
• Patter primer gera markup estilizado através de uma pasta com componentes markup.
• Hologram é uma ruby gem para gerar guia de estilo baseado em comentários no CSS
• TopDoc é uma ferramenta muito bem documentada para gerar guias de uso para CSS que utiliza uma maneira estrita de documentação de código CSS.
• Alguns posts interessantes Warpspire, rjmetrics e UXMag.

Testes de regressão

CSS é um conjunto de regras que aplicado ao HTML produz um resultado bonito esteticamente.. Por essa razão não é fácil adicionar testes a um CSS framework. Mas existem maneiras de adicionar testes ao nosso pipeline, a maioria baseado em antes e depois usando comparações de imagens:

• Wraith, uma ferramenta de comparação responsiva feita pelo pessoal da BCC.
• PhantomCSS Testes de regressão visual usando PhantomJS.
• Hardy Teste de CSS, baseado em Selenium e cucumber.
• CSS critic, Um framework leve de testes de regressão para folhas de estilo.
• Sikuli é uma ferramenta de testes de interface gráfica utilizando screenshots..
• SuitCSS provê uma estrutura de testes para testar componentes visualmente.

Análise de código estática

Interessante para se utilizar antes de commitar, para verificar erros de sintaxe e redundância de código:

• CSSCSS é um analizador de redundância de CSS
• CSSLint ferramenta online e ferramenta de linha de comando para verificar performance e sintaxe.
• MINCSS vai verificar seletores CSS que não estão sendo usados.

Implementação HTML+CSS

Depois de você configurar o seu projeto, é preciso pensar em como você irá escrever seu código CSS:

• Você irá utilizar algum framework como base? inuitcss ou HTML5 Boilerplate.
• Alguma ferramenta de automação do seu workflow? Bower, Grunt ou Yeoman.
• Reset ou Normalize seu CSS.
• Grid system — feito a mão, suportando diferentes breakpoints ou apenas suportando um número fixo de colunas em diferentes dispositivos. Semantic.gs ou Bourbon Neat.
• CSS3 detecção de funcionalidade - bibliotecas como modernizr ou detecção nativa.
• Pré-processadores CSS — SASS, LESS ou Stylus.
• Ferramentas de utilitários e prefixos Compass.
• Como você irá organizar o seu CSS? OOCSS, SMACCS, Semantic UI ou BEM.
• Soluções para imagens responsivas — enquanto W3C ainda define o rascunho do picture element, você deve testar picturefill, a técnica clown car ou usar uma solução server side.
• Onde você irá setar suas media queries breakpoints? novo
• Você quer suportar retina ou high DPI dispositivos? novo

Outras considerações

• Performance Browser Diet.
• Design responsivo Browser Fit.