CSS classe com

CSS não é tão SIMPLES quanto pensa

O CÓDIGO É FRÁGIL Até o código mais organizado pode ir pro espaço

com apenas algumas linhas de código.

a cada nova customização que é feita.

O TAMANHO DO ARQUIVO TENDE A CRESCER

quando não há padronização.

REUTILIZAÇÃO DE CÓDIGO É MUITO DIFÍCIL

ENTÃO... O QUE FAZER?

BOAS PRÁTICAS

1.  Escreva nomes de classes de acordo com sua função e não quanto a aparência.

2.  Faça a separação da pele e do esqueleto.

3.  Separe o contêiner do conteúdo.

4.  Extenda estilos usando mais de uma classe num mesmo elemento.

5.  Planeje seu código em blocos que possam ser reaproveitados.

6.  Diminua a quantidade de seletores.

7.  Use resets e outras ferramentas para remover inconsistências entre navegadores.

8.  Aprenda a amar os grids.

PRINCIPAIS EQUIVOCOS

1.  Evite especificar a tag a qual uma classe é aplicada.

2.  Evite IDs dentro da área principal do site.

3.  Texto como texto, não como imagem.

4.  Imagens que fazem parte do layout devem ser tratadas como imagens de fundo.

5.  Evite alinhamento vertical.

6.  Estilos dependentes do contexto

7.  Corte estilos retundantes e una estilos parecidos.

8.  CSS inline e !important.

9.  HTML inválido.

NOMES DE CLASSES (E IDs) DEVEM INDICAR O CONTEÚDO

#left_menu { ... }

#primary { ... }

.big_red_button { ... }

.buy { ... }

EXCEÇÕES SÃO EXCEÇÕES

label.required { ... } input.required { ... }

.align_left { ... }

.align_right { ... } .show { ... } .hide { ... }

mas têm a sua utilidade :)

#content div#left_column.grid_10 div#menu ul .item a { ... }

#menu li a { ... }

#product_listing div.product img.thumb { ... }

.product .thumb { ... }

ECONOMIZE NOS SELETORES

#product_list span.sell_price { color: #ccc; font-weight: normal; } .sell_price { color: #07c; font-weight: bold; font-size: 1.4em; }

??? 0111

0010

ESPECIFICIDADE É DO MAL

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

ESPECIFICIDADE É DO MAL

<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>

EXTENDENDO...

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.

IE:NSUPORTÁVEL

div > p div + p div[foo] p:first-child p:last-child div:before div:after input:focus

div.bug { float: left; margin: 5px 5px 5px 50px; // previne que a margem esquerda // seja duplicada no IE display: inline; }

e por aí vai...

LOVE / HATE

a:link { ... } a:visited { ... } a:hover { ... } a:active { ... }

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

Dúvidas? twitter.com/blude ☛