Os perigos do Compass!

Tenho trabalhado muito com compass ultimamente e para falar a verdade não consigo mais trabalhar diretamente no .css, a estrutura e legibilidade que ele proporciona são excelentes. Mas tenho percebido um problema nos meus códigos que nunca vi ninguém falar antes pelos blogs e afins, bom vamos ao cenário:

Imagine que você tem que fazer a seguinte tela:

No compass você fara algo assim:

a, .address{

 display: inline-block;
 padding: 30px 15px;
 border: solid 1px #c3c3c3;
 margin-right: 10px;
 width: 200px;
 text-align: center;
}

Até então nada diferente de um css normal, mas então o design muda e fala que o endereço agora será negrito e vermelho, colocamos a tag strong no html e vamos la no css estilizar o strong para vermelho:

No compass você fara algo assim:

a, .address{
 display: inline-block;
 padding: 30px 15px;
 border: solid 1px #c3c3c3;
 margin-right: 10px;
 width: 200px;
 text-align: center;
 strong{
  color: #ff0000;
 }
}

Ok, tudo certo, funcionando e minimizado por que temos sempre que pensar em performance certo? Mas espera um pouco vamos olhar o css criado pelo compass:

a, .address{
 display: inline-block;
 padding: 30px 15px;
 border: solid 1px #c3c3c3;
 margin-right: 10px;
 width: 200px;
 text-align: center;
}

a strong, .address strong{
 color: #ff0000;
}

Opa, a strong? Pois é muitas vezes com a comodidade que o compass nos oferece deixamos alguns códigos desnecessários passar e toda aquela nossa preocupação com a performance vai por aguá abaixo, claro que esse é um exemplo simples, mas pense naqueles grandes sites com mais de 20 arquivos .css e cada um com umas 700 linhas cada.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *