CSS com classe
0 gostou448 visualizações
1) O documento discute boas práticas e problemas comuns no desenvolvimento de CSS, como a fragilidade do código e dificuldade de reutilização quando não há padronização. 2) Ele fornece dicas como escrever nomes de classes de acordo com sua função, separar estrutura de estilo e conteúdo, e planejar código em blocos reutilizáveis. 3) Também aborda problemas com especificidade, seletores complexos, compatibilidade entre navegadores e amadurecimento necessário sobre CSS.
![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...](https://image.slidesharecdn.com/csscomclasse-110701082652-phpapp01/85/CSS-com-classe-16-320.jpg)
CSS com classe
- 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 { ... }