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.