As 4 componentes da programação Web

Sempre é bom relembrar: uma aplicação HTML é composta de 4 elementos:

• Conteúdo (strings)
• Estrutura (HTML)
• Comportamento (JavaScript)
• Apresentação (<br>, <font>, <center>, style e CSS)

Normalmente se separam estas partes nos seguintes arquivos:

• arquivos server-side: .php, .cs, .py, .java, .resources, etc - suporta  HTML, JavaScript e CSS
• .html - suporta HTML, JavaScript e CSS
• .js - suporta HTML, JavaScript e estilos
• .css - suporta CSS

Como vocês podem ver, é possível incluir CSS em todo tipo de arquivo. Agora imagine-se desenvolvendo ou mantendo um programa que mistura tudo e põe as coisas erradas nos arquivos errados, fica uma bagunça. Então mais uma vez: ponha cada coisa no seu lugar. Essa mania de por tudo num arquivo só é coisa de quem não tem uma IDE decente e fica usando editores de texto simples para programar.

• Conteúdo no .html dificulta a internacionalização.
• Javascript no .html dificulta a compreensão e depuração do código, mesmo que seja um simples onclick.
• HTML no script do servidor ou no .js dificulta a leitura de código e formação correta do markup. Para contornar isso use um view engine. Ex: pure para JavaScript.
• CSS ou style no .html ou no .js dificulta a atualização de layout. Lembre-se: o layout ou design de uma página sempre muda.