Projetar coisas simples não deveria ser complicado, e não é. Difícil é projetar coisas complexas de maneira simples, atingir os requisitos do software enquanto mantém a simplicidade do código. Quer complicar mais ainda? Projetar e manter a simplicidade enquanto os requisitos do software mudam.

Refatorar também é importante. É simplificar código sem reduzir a funcionalidade. Você pega aquele código yakissoba (PHP+HTML+CSS+JavaScript quem curte?) de 500 linhas e reduz pra meia dúzia de pequenas funções de 10 ou 15 linhas. Ou pega aquele CSS monstro cheio de classes e IDs desnecessários e enxuga ao máximo.

Eu geralmente inicio meus projetos em CSS de maneira bem simples. Uso o mínimo de classes e ids possível, e se uso eu procuro seguir um padrão uniforme. Meu último projeto pessoal, o HtmlCss.com.br tem um código enxutíssimo. Projetei para que um iniciante pudesse abrir o fonte, ler e aprender com o código.

Ghiaweb: Framework feito para simplicidade

Talvez meu melhor exemplo de código enxuto é o Ghiaweb, que é um framework para construir sites sistemas na internet. O exemplo que está no ar, com um formulário consideravelmente complexo e um menu drop-down, não possui nenhum elemento HTML desnecessário, nenhuma classe nem ID. O código HTML é legível e organizado, simples de manter, adicionar novos campos ou seções no formulário sem prévio conhecimento da folha de estilos.

É muito comum ver formulários desenhados com várias classes, ids, parágrafos, divs e tudo mais. Muitas vezes, o desenvolvedor adiciona esses elementos para posicionar tudo da maneira que deseja. As classes e ids são pra localizar os elementos, para que as regras CSS possam ser aplicadas. Os elementos extra muitas vezes são somente para que as classes e ids sejam utilizadas (um perigoso círculo vicioso).

Uma série de práticas para manter a simplicidade, e que pretendo explicar nos próximos posts, é:

• Projetar para o conteúdo: Construir o HTML primeiro e não mexer mais nele. Só depois construir o CSS.
• Utilização de seletores: Encontrar exatamente o elemento que você quiser, sem adicionar classes e ids nele.
• Semântica dos órfãos do HTML: Aprender a utilizar um vocabulário de elementos melhor que divs e spans.
• Limitações: Como imagens de fundo, estilos em tabelas e elementos-McGyver.

Aguardo comentários