Some quick insights about CSS and how to avoid mistakes dealing with Internet Explorer etc.

1. com
CSS classe

2. CSS
não é
tão
SIMPLES
quanto pensa

3. O CÓDIGO É FRÁGIL
Até o código mais organizado pode ir pro espaço
com apenas algumas linhas de código.

4. O TAMANHO DO ARQUIVO
TENDE A CRESCER
a cada nova customização que é feita.

5. REUTILIZAÇÃO DE CÓDIGO
É MUITO DIFÍCIL
quando não há padronização.

6. ENTÃO... O QUE FAZER?

7. BOAS PRÁTICAS
1. Escreva nomes de classes de 5. Planeje seu código em blocos
acordo com sua função e não que possam ser
quanto a aparência.
reaproveitados.
2. Faça a separação da pele e do 6. Diminua a quantidade de
esqueleto.
seletores.
3. Separe o contêiner do 7. Use resets e outras
conteúdo.
ferramentas para remover
inconsistências entre
4. Extenda estilos usando mais navegadores.
de uma classe num mesmo
elemento.
8. Aprenda a amar os grids.

8. PRINCIPAIS EQUIVOCOS
1. Evite especificar a tag a qual 5. Evite alinhamento vertical.
uma classe é aplicada.
6. Estilos dependentes do
2. Evite IDs dentro da área contexto
principal do site.
7. Corte estilos retundantes e
3. Texto como texto, não como una estilos parecidos.
imagem.
8. CSS inline e !important.
4. Imagens que fazem parte do
layout devem ser tratadas 9. HTML inválido.
como imagens de fundo.

9. NOMES DE CLASSES (E IDs)
DEVEM INDICAR O CONTEÚDO
#left_menu { ... }
.big_red_button { ... }
#primary { ... }
.buy { ... }

10. EXCEÇÕES SÃO
EXCEÇÕES
mas têm a sua utilidade :)
label.required { ... } .align_left { ... }
.align_right { ... }
input.required { ... }
.show { ... }
.hide { ... }

11. ECONOMIZE
NOS SELETORES
#content div#left_column.grid_10 div#menu ul .item a { ... }
#menu li a { ... }
#product_listing div.product img.thumb { ... }
.product .thumb { ... }

12. ESPECIFICIDADE É DO MAL
#product_list span.sell_price { 0111
???
color: #ccc;
font-weight: normal;
}
.sell_price { 0010
color: #07c;
font-weight: bold;
font-size: 1.4em;
}

13. ESPECIFICIDADE É DO MAL
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

14. EXTENDENDO...
<div class=“products showcase”>
<ul>
<li id=“sku_001” class=“product new sale”>
<div class=“thumb”><img src=“...”></div>
<div class=“name”>...</div>
<div class=“price”>
<span class=“currency reais”>R$</span>
<span class=“ammount”>...</span>
</div>
</li>
...
</ul>
</div>

15. INTERNET EXPLORER:
MUITO POLÊMICO
Entenda os bugs e as limitações
das várias versões do navegador
ou prepare-se para enfrentar o apocalipse.

16. IE:NSUPORTÁVEL
div > p div.bug {
div + p float: left;
div[foo] margin: 5px 5px 5px 50px;
p:first-child // previne que a margem esquerda
p:last-child // seja duplicada no IE
div:before display: inline;
div:after }
input:focus
e por aí vai...

17. LOVE / HATE
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

18. REFERÊNCIAS
http://www.slideshare.net/stubbornella/object-oriented-css
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://blog.websitestyle.com/index.php/2006/02/18/love-hate-lvha/
http://www.alistapart.com/articles/12lessonsCSSandstandards/
http://dev.l-c-n.com/CSS3-selectors/browser-support.php

19. Dúvidas?
☛
twitter.com/blude