Carlos tinha um pequeno problema, que na verdade já era bem comum para qualquer um que trabalhe com desenvolvimento: prazo apertado, projeto mal brifado, e um designer que, de forma educada, não era exatamente o “lápis mais apontado do estojo”.
Felizmente uma versão prototipada do projeto (um site simples de pesquisa) ficou pronta para avaliação do cliente em tempo recorde, e obviamente várias mudanças foram solicitadas.
Entre a pressão do cliente, o prazo apertado e as várias mudanças que precisavam ser feitas, o designer simplesmente sumiu, e Carlos acabou tendo que cuidar das revisões de layout. Ao passar pela listagem de perguntas (que tinha um efeito simples, a cor de fundo mudava quando o mouse passava pelo título), Carlos encontrou algo estranho: embora o efeito para todas as linhas de perguntas fosse exatamente o mesmo, cada linha tinha uma classe css diferente. Eram mais ou menos 50 perguntas.
Ao olhar no arquivo .css, Carlos conseguiu entender porque esse arquivo era justamente o mais pesado de todo o projeto:
.linhas ul li.p01 a, .linhas ul li.p01 a:visited { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; font-size: 11px; color: #666; text-decoration: none; background-image: url(imagens/linha.jpg); background-repeat: no-repeat; background-position: 167px bottom; } .linhas ul li.p01 a:hover, .linhas ul li.p01 a:active { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; background-image: url(imagens/linha1.jpg); background-repeat: no-repeat; background-position: left bottom; font-size: 11px; color: #FFF; text-decoration: none; } .linhas ul li.p02 a, .linhas ul li.p02 a:visited { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; font-size: 11px; color: #666; text-decoration: none; background-image: url(imagens/linha.jpg); background-repeat: no-repeat; background-position: 167px bottom; } .linhas ul li.p02 a:hover, .linhas ul li.p02 a:active { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; background-image: url(imagens/linha2.jpg); background-repeat: no-repeat; background-position: left bottom; font-size: 11px; color: #FFF; text-decoration: none; } .linhas ul li.p03 a, .linhas ul li.p03 a:visited { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; font-size: 11px; color: #666; text-decoration: none; background-image: url(imagens/linha.jpg); background-repeat: no-repeat; background-position: 167px bottom; } .linhas ul li.p03 a:hover, .linhas ul li.p03 a:active { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; background-image: url(imagens/linha3.jpg); background-repeat: no-repeat; background-position: left bottom; font-size: 11px; color: #FFF; text-decoration: none; } (Muitas e muitas e muitas linhas parecidas com essas) .linhas ul li.p50 a, .linhas ul li.p50 a:visited { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; font-size: 11px; color: #666; text-decoration: none; background-image: url(imagens/linha.jpg); background-repeat: no-repeat; background-position: 167px bottom; } .linhas ul li.p50 a:hover, .linhas ul li.p50 a:active { display: block; height: 30px; width: 500px; padding-top: 4px; padding-right: 127px; padding-bottom: 5px; padding-left: 167px; background-image: url(imagens/linha50.jpg); background-repeat: no-repeat; background-position: left bottom; font-size: 11px; color: #FFF; text-decoration: none; }
Carlos simplesmente levantou, pegou um cigarro e um café, e foi ver a lua fora da agência. Aquela seria uma longa noite….
)
