Desenvolvimento por camadas

Separando a informação, formatação e comportamento

Basicamente existem três separações no desenvolvimento web: Informação, que fica com o código HTML, onde você vai dar significado à informação. Formatação, que fica com o CSS, que é como você vai dar estilo a toda informação marcada com HTML. E por fim a camada de Comportamento, que é como você vai controlar elementos do HTML com Javascript e seus frameworks.

O HTML vai servir para marcar sua informação dando significado a ela. Se você marca uma frame com a tag <H1>, você está dizendo para leitores de telas para cegos, motores de buscas e browsers, que aquela frase se trata de um título importante. Você deu significado à este pedaço de texto.

Logo depois você precisará deixar esse título com uma cor diferente, com um background bonito e uma fonte legal. Aí você entra com o CSS para fazer esse trabalho. Essa formatação é importante por que você precisa deixar o site do jeito que o Designer quer. Lembre-se que aqui você só modifica o visual do elemento e não o significado dele.

Essa separação garante que ao modificar o código CSS você não estrague o trabalho já feito no HTML. Os códigos estão totalmente separados e você consegue manter a organização sob controle, mantendo cada código em seu devido lugar.

Por isso, evite inserir código CSS direto no HTML, como o exemplo abaixo:

<h1 style="background-color: orange;">Título com fundo laranja</h1>

Isso faz com que você suje seu código HTML e não deixe seu código CSS centralizado em um lugar. Suponha que você tenha outros títulos com o fundo laranja e queira mudar todos para outra cor, você terá que encontrar cada um deles dentro do seu projeto e mudar manualmente cada um. Com o desenvolvimento em camadas você não tem problemas assim.

Este é o conhecimento básico sobre camadas client-side que você pode ter.