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….
Mas se o cara que entregou esse code era designer acho que não teve muita culpa, pois enviou o arquivo do jeito que o aplicativo gráfico formatou.
Sério que existe um aplicativo que pega várias divs iguais e com praticamente a mesma função (e que deveriam ter a mesma classe) e transforma em várias divs com várias classes com nomes diferentes?
Se for, então esse aplicativo é um WTF gigante. :p
(e, de qualquer forma, não explica o fato do sujeito que entregou não ter revisado antes o código)
rss…. vc ainda não viu nada… corta uma imagem em umas cem fatias no photoshop e salva em HTML… realmente o cara que entregou o serviço poderia ser mais criterioso para não acabar nesse buzz…rss
se o estilo é igual, vc pode usar [class^=p] como seletor.
Se o estilo é igual, se as divs são iguais, você pode colocar a mesma classe em todas as divs e pronto.