Como escrever HTML, CSS e JavaScript para facilitar o trabalho de desenvolvedores de back-end?

Quando recebo um design de um designer, recebo-o como um arquivo PSD (Photoshop). Sempre espero nomes adequados de camadas e pastas, basicamente um PSD limpo e gerenciado. A partir deste projeto, desenvolvo HTML, CSS e JavaScript e os entrego aos desenvolvedores de back-end. Para facilitar a compreensão, eu

• escreva código semântico,
• mantenha JavaScript e CSS em arquivos externos,
• adicione comentários úteis em arquivos HTML, CSS e JS,
• use sprites CSS (embora os desenvolvedores não gostem),
• use placa de caldeira HTML5,
• use jQuery para JavaScript,
• tente usar novas tags HTML5 e CSS3 sempre que possível e
• enviou um arquivo Zip contendo HTML, CSS, JS e imagens.

Espero que, se pequenas alterações precisem ser feitas no layout, os desenvolvedores possam lidar com isso.

Gostaria de ouvir dos desenvolvedores de back-end e outros ninjas de CSS o que mais se poderia fazer em termos de organização de arquivos e marcação para facilitar a integração com sistemas de back-end (ou seja, tecnologias de back-end, PHP, .NET , Ruby etc.) Clientes diferentes usam sistemas diferentes.

Muitas dessas respostas abrangerão as amplas faixas de idéias, mas aqui estão as minhas:

• Deixe espaço no design do formulário para mensagens de erro.
• Não coloque etiquetas nas caixas de entrada!
• Coloque seu CSS e JavaScript em um arquivo separado, a menos que você saiba o que está fazendo e se sinta mal com isso.
• Mantenha os elementos de design iguais entre as páginas. É irritante quando um componente de design (como uma caixa "visualizada recentemente") possui marcações diferentes em cada página.
• Não faça o que é fácil para você, faça o que é certo. <button>tags sugam. backround-imagepara coisas que realmente deveriam ser <img>marcas de merda.
• Certifique-se de que se você estiver criando um componente de página, ele pode ser dimensionado. Eu sei que a maioria dos bons desenvolvedores de front-end faz isso, mas tive vários casos em que alguém usou uma única imagem no que deveria ter sido uma situação de limite máximo / máximo. Programadores não gostam de abrir o Photoshop.
• Revise seus modelos. Programadores (bons) são pessoas dedicadas e orientadas a detalhes. Se eles começarem a ver problemas em seu design (talvez a navegação no rodapé tenha erros de ortografia ou ortografia inconsistente), isso fará com que eles façam perguntas e diminuam o trabalho.

Finalmente, e talvez o mais importante:

• Aprenda as convenções básicas do idioma que está sendo desenvolvido no back-end. Ser capaz de olhar para um modelo PHP e entender a sintaxe básica por trás de uma foreachou uma ifinstrução e como formatar uma echoinstrução ou mover uma <?php ?>tag aumentará bastante o seu valor como desenvolvedor front-end - adoro quando um desenvolvedor front-end precisa para fazer uma alteração simples e fazê-lo no modelo em vez de me entregar um novo zip de todos os seus arquivos.
• Como adendo, aprenda a usar o software de controle de versão. Você não precisa ser um especialista, mas se eu puder olhar para um diff em vez de tentar descobrir o que mudou entre dois arquivos zip, isso tornará meu trabalho cem vezes mais fácil.

Essas são apenas algumas - tenho certeza de que existem muito mais, mas se você realizar tudo isso, certamente ganhará o respeito e a apreciação de quem está transformando seus modelos em um site.

As coisas óbvias que consigo pensar que facilitariam a vida de um cara de back-end é a simplicidade de comportamento. Ao projetar elementos de uma página da Web que tenham vários comportamentos (rolagens, menus, etc.), todo esse comportamento deve ser padronizado de maneira comum, para que o desenvolvedor não precise continuamente reverter para algum gráfico para determinar qual função ele precisa ligar para que uma página se comporte.

As grades não devem exigir célula por manipulação de dados ou funcionalidade por célula. Os elementos de bloco das páginas devem ser facilmente definidos como elementos comuns, para que possam ser facilmente segmentados no código por trás. Isso ajudará o desenvolvedor a reutilizar o código e / ou facilitar a comunicação entre as várias facetas da página.

As áreas da página não devem cruzar limites de design específicos. Os itens de um elemento não devem interferir nos itens de outro elemento.

Chega um ponto, no entanto, em que você simplesmente não pode evitar fazer os desenvolvedores pularem por aros ardentes. Alguns elementos da interface serão difíceis de construir por sua própria natureza.

Observe que, às vezes, é necessário escolher entre facilitar a modificação de uma solução para um desenvolvedor de back-end e otimizar algo.

Sprites CSS que você citou é um bom exemplo. Não entendo como alguém pode criar um site quando a escalabilidade e o desempenho importam e possui links para 100 imagens, 5 CSS e 15 arquivos JavaScript de cada página. Por outro lado, os sprites CSS não são fáceis de manter, e pequenas alterações no design podem exigir muito trabalho.

Por exemplo, se você possui três ícones de estado, um abaixo do outro, e deve adicionar um quarto estado, você adiciona o quarto ícone na parte inferior da imagem, separadamente dos outros três? Ou você o adiciona após o terceiro ícone, movendo todo o resto para baixo para ter algum espaço vazio para ele?

O mesmo ocorre com a combinação e redução de arquivos CSS e JavaScript. Você deve fazer isso em um site de alguma escala, mas isso exigiria um esforço extra.

É exatamente a mesma coisa para a CDN. Você precisa usá-lo para sites grandes, mas seria mais difícil fazer alterações. Por exemplo, se você alterou um arquivo CSS, é necessário forçar os navegadores a fazer o download do novo, modificando o URI no arquivo para cdn.example.com/g.css?r=2, então cdn.example.com/g.css?r=3, etc.

Além disso, "mais fácil" é relativo . Veja, por exemplo, as diretrizes para escrever código CSS: pessoalmente, prefiro um estilo por linha, sem espaço em branco:

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

enquanto a maioria das pessoas odeia essa sintaxe e prefere a que odeio e acho difícil de ler (não, não sou louca):

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

Da mesma forma, o uso do jQuery não significa que você facilitará a modificação dos arquivos pelo desenvolvedor de back-end, porque alguns desenvolvedores têm mais experiência com o Prototype ou outras estruturas.

Em todos os casos, uma documentação detalhada é útil, se o desenvolvedor quiser lê-la (a maioria não). Você também pode facilitar a vida de um desenvolvedor, perguntando com precisão ao desenvolvedor específico como ele prefere as coisas a serem feitas e trabalhando lado a lado no início, ao criar uma estrutura (por exemplo, projetando o fluxo de trabalho a ser usado para minimizar e combine os arquivos).

O melhor de todos os mundos é quando o designer não está jogando um arquivo zip por cima de uma parede e está realmente trabalhando no projeto como um dos desenvolvedores. Requer um pouco de manipulação manual para configurar, mas é realmente incrível quando não há nenhuma tradução entre design e dev e todos podem participar das mesmas iterações. Se você tem um bom processo ágil sem atrito, não é muito difícil fazer isso acontecer.

Na maioria dos casos, eu aceitaria os designers trabalhando de maneira controlada por versão e usando isso como mecanismo de distribuição. Eu realmente não quero lidar com um arquivo zip grande e gordo sempre que houver uma pequena alteração.

Flexibilidade para você é flexibilidade para eles normalmente. Todas essas práticas recomendadas que você segue são vitórias nos dois lados do aplicativo.

Um ponto crítico e muitas vezes esquecido, no entanto, é escrever uma interface do usuário robusta. Muitos componentes da interface do usuário estão excessivamente ancorados em um contexto ou em um conjunto excessivamente exigente de HTML e o CSS está configurado para falhar.

Se você tem uma lista suspensa, por exemplo, é muito menos trabalho do JS ancorar um componente descartável em posição absoluta dentro de um contêiner clicado de conjunto relativo (não são necessárias cordas) do que puxar o martelo JQuery e obter as coordenadas para movê-lo sobre o elemento e coloque-o no lugar. Também é muito menos provável que ocorra casos em que a página muda ou algum novo recurso do navegador desativa as informações de posicionamento. Quanto mais você confiar nas habilidades de HTML / CSS para evitar o trabalho com JS, mais robusta será sua interface do usuário.

Como regra geral, tento garantir que a única coisa que meus componentes de interface do usuário precisam é de uma tag HTML para viver com um ID ou classe apropriada. Quanto mais coisas você pode fazer com esse contêiner sem que a interface do usuário se quebre ou com o contêiner que realmente acomoda como expandir / reduzir para se ajustar à medida que as dimensões do contêiner mudam, mais ele pode ser implementado facilmente em qualquer parte do aplicativo sem a necessidade de um cliente. especialista. Tudo o que eles precisam fazer é dar uma aula sobre isso.

Prefira a delegação de eventos nos contêineres da interface do usuário a atribuir ouvintes diretamente aos nós do ponto final, como botões. Esse componente da interface do usuário pode funcionar com HTML estático agora, mas você nunca sabe quando alguém vai querer extrair e reescrever o HTML dentro com innerHTML ou algo assim. Se o contêiner estiver intacto e todos os eventos forem delegados (consulte o método jquery 'on'), você não precisa se preocupar com isso e eles podem nunca aprender da maneira mais difícil que a substituição do HTML interrompe os ouvintes.

No interesse de manter a delegação por perto como uma opção, não use o stopPropagate em qualquer lugar que não seja o nó de extremidade e envie uma mensagem de ódio a desenvolvedores de estruturas idiotas que enviam spam por todo o lugar.

Quanto ao layout, mantenha o HTML mínimo, semântico e evite os wrappers div. Quanto menos HTML houver, mais fáceis serão os problemas de layout para os novatos em layout diagnosticarem.

Use nomes de classe auto-explicativos para o utilitário CSS. Uma classe "row" provavelmente será mais clara para os noobs CSS do que "clearfix".

Sempre forneça elementos seccionais exclusivos, IDs exclusivos. Torna muito mais fácil identificar onde as coisas específicas de uma seção estão acontecendo, é mais fácil substituir as coisas e também pode ser uma vitória em JS de legibilidade e desempenho.

Obviamente, é uma má notícia ficar excessivo com um esquema de classes, mas quanto mais um desenvolvedor de back-end puder definir simplesmente adicionando as classes certas às coisas, mais fácil será para eles fazerem alterações na página existente.

E, é claro, no início do projeto, eles concordam com pelo menos uma coisa: o back-end e o front-end se conectam apenas via HTML e JSON. Não deixe que eles usem coisas que "escrevam o JavaScript para você!" É uma bagunça sangrenta e um pesadelo de manutenção.

Como em tudo relacionado ao desenvolvimento, prefira o DRY e o minimalismo.

Ele ainda não me permite comentar (tão estúpido), mas como uma nota pessoal, eu mencionaria, eu trabalho de volta para trás com um codificador PHP todos os dias (além de ajudar no trabalho dele) e a ferramenta mais fácil que encontramos é para usar a caixa de ferramentas do Komodo e listar variáveis ​​"transferidas" de cada visualização / controlador / modelo na caixa de ferramentasx, para que a qualquer momento, se eu estiver olhando para projetar uma página em torno de um conjunto de dados enviados para essa página, eu pode olhar na caixa de ferramentas e ver exatamente quais dados estão sendo enviados e em que "tipo" "eles estão sendo enviados, bem como vice-versa, apenas uma dica.