O desenvolvedor web, o cara que programa, que mete a mão na massa – ou no código – é, obviamente, o pedreiro.  Um pedreiro de luxo, é verdade, mas continua pedreiro. Um peão. E assim como um peão o desenvolvedor web pode ser chamado para muitas coisas – os bicos ou freelas – que vão desde uma troca simples de azulejos – ou uma alteração num formulário de contato – até uma reforma total da cozinha – ou a construção de uma nova área do site.

Nesse aspecto não podemos esquecer que, assim como o pedreiro não é decorador, desenvolvedor web não é webdesigner. O pedreiro até dá pitaco no azulejo, na cor da tinta, mas quem estudou pra isso não foi ele (eu sei que o pedreiro não estudou nem pra ser pedreiro, mas você entendeu).

Se estiver fazendo um freela e precisar de um layout profissional chame um profissional. Layouts envolvem diagramação, equilíbrio de cores, hierarquias de elementos que, se você não estudou, você vai simplesmente ignorar e o resultado pode ser desastroso. Convide um designer para participar do projeto nem que seja para te dar consultoria ou para te mandar uma ideia inicial. Não fica caro e enriquece o seu trabalho, além de – se você trabalhar direitinho – o designer te chamar quando precisar de um desenvolvedor.

Outro ponto interessante é que, em construções decentes, sabe-se onde queremos chegar. Sites que não são bem planejados desde o começo têm uma estrutura difícil de entender e, por consequencia, difícil de navegar. Se estiver com um problema grande pra resolver nesse sentido é legal pedir ajuda pra alguém da área de arquitetura de informação.

Entretanto existem algumas diferenças na comparação com a construção civil como, por exemplo, o acumulo de funções. Não raro assumimos a função de engenheiro e pedreiro ao mesmo tempo, cobramos preços bem diferentes dos pedreiros (eu cobro, você não?!). Também passamos facilmente de pedreiros a engenheiros, mas quando precisamos temos que colocar nosso capacete de peão e ir lá mexer a massa.

Posts Relacionados:

1. Organizando seu código CSS

Então eu desenvolvi 5 regrinhas que ajudaram meu CSS a ficar mais organizado, e mais fácil de mexer.

1- Usar um CSS Reset

CSS Reset é como tomar uma droga bem forte. Quem nunca usou acha que não é algo útil, ou até ruim. Mas depois que você experimenta não quer mais voltar atrás e ainda tenta convencer os outros a usarem também.

Apesar dos navegadores terem um ótimo suporte ao CSS, muitos deles tem padrões diferentes. Se você não definiu uma coisa, ela é exibida com o padrão do navegador, e isso pode fazer o seu site ficar com caras diferentes de acordo com o navegador do usuário.

O CSS Reset pega uma grande parte dos elementos visuais e padroniza eles, geralmente zerando ou definindo um novo padrão. Ele tira as bordas, as margens, os paddings, padroniza o tamanho da fonte, etc. A partir daí, você sabe que as coisas vão ficar mais certinhas em todos os navegadores e não vai ter nenhuma surpresa desagradável.

Recomendo Eric Meyer Reset, ou o fantástico YUI Reset.

2- Colocar em ordem alfabética

Sabe quando você tem aquele elemento no CSS que tem uns 12 parâmetros ou mais? Aí você precisa editar a margem, passa o olho rápido pela lista de parâmetros e não encontra. Cadê a margem que estava aqui? Tá ali bem na sua frente, mas tem que olhar umas 3 vezes pra achar. É um saco.

Eu passei então a organizar meus parâmetros do CSS em ordem alfabética, e fez uma grande diferença. Eu sempre sei que a border vai estar perto do começo, e que a margin vai estar ali perto do meio, perto do padding.

3- Separar os trechos de códigos em categorias

Quando o CSS fica realmente grande, o jeito mais fácil de organizar o código é usando comentários pra criar uma separação visual.

/* ------------------------------------------- */
/* ---------- MENU LATERAL ------------------- */
/* ------------------------------------------- */
elemento {
    color: #000;
    background: #FFF;
    outros códigos...
}
elemento a {...}
elemento img {...}

/* ------------------------------------------- */
/* ---------- RODAPÉ ------------------------- */
/* ------------------------------------------- */

div#footer {...}
div img {...}

Fica ainda mais organizado se as categorias estiverem numa ordem lógica, indo dos elementos mais genéricos pros mais específicos.

4- Colocar seu esquema de cores como comentário  no topo

Geralmente no site você tem umas poucas cores selecionadas pra usar. O que acontecia muito comigo era toda hora ter que parar pra procurar qual era mesmo o código daquele azul do título, ou o código do vermelho da borda do rodapé.

Uma solução simples passou a me poupar muito tempo.

Eu passei a colocar um comentário no topo do CSS, indicando os códigos das cores do meu site.

/* ---------- CORES ------------------------- */
/*
    Azul Claro: #A8EFEE;
    Marrom Escuro: #473B38;
    Rosa Clodovil: #FF4095;
    Amarelo Urina: #F2D843;
*/

5 – Não usar o parâmetro important!

O CSS tem o recurso important! que serve para definir uma regra como prioridade máxima, insubstituível. E isso atrapalha demais. Se você definiu, por exemplo, a cor da fonte como !important, não tem nada que você possa fazer no CSS pra definir outra cor de fonte. Na verdade, nem por javascript você conseguirá mudar a cor da fonte. O important! sempre tem prioridade máxima.

Acontece que no fim das contas isso sempre acaba atrapalhando no futuro. Mesmo que a versão inicial do layout saia legal, mais cedo ou mais tarde você vai precisar editar o seu site e aquele important! perdido lá vai te dar dor de cabeça.

Se você usou esse recurso no seu CSS, é porque algo não está certo. Dá pra organizar todo o seu site sem ter que usar isso, e é bom se planejar para isso desde o começo.

Usar !important no CSS é como casar com mulher promíscua. Você pode não ter tido nenhum problema até agora, mas é só questão de tempo.

Posts Relacionados:

1. Cada um no seu quadrado
2. Use a Cabeça! (Head First) HTML com CSS & XHTML