Embed Size (px)
Citation preview
Padrões webna globo.com
com o fein
Por que?
Doctype.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• boxmodel• margin: auto e width: auto;• img !important
• over!ow: visible; !important
• width: value; em elementos inline• <input />
Doctype.
Progressive enhacement &
graceful degradation
has layout
• Estrutura: html, head, title, script, link, body• Headings• Pouco usadas: em, strong, abbr, cite, address
htmelê
• inline X block• listas• tabelas• formulários
htmelê
• link vs @import• sintaxe• unidades de medida• position• !oat• over!ow
CSS... let’s see
• link vs @import• tipos de midia• sintaxe• unidades de medida• position• !oat• over!ow
CSS... let’s see
• [att^=val] - pre"x• [att*=val] - substring• [att$=val] - suffix• E > F {}• E + F {}• E ~ F {}
Seletores no cda.
• *• .class.class• [att^=val] - pre"x• [att*=val] - substring• [att$=val] - suffix• E > F {}• E + F {}• E ~ F {}
Seletores no cda e cma.
• element:!rst-child• element:hover
Pseudo-classes no cda.
• element:!rst-child• element:hover• element:active• element:focus
Pseudo-classes no cma.
• no cda chora =/• :after• :before
Pseudo-elementos no cma.
• !important• hacks• css expressions• seletor *• mais de 3/4 niveis de seleção
Feio, o que eu não posso fazer?
• chamadas para estilos sempre no topo• não usar camel case (usar - ou _)• semantica (evitar: siglas; nomes de elementos
HTML etc)• usar pre!xos, su!xos• não usar números, caracteres especias• evitar nomes muito grandes
Feio, o que eu devo fazer?
• sempre em Portugues (CDA)• ordem alfabética;• quebra de linha nas propriedades;• reuso de prop. entre seletores;• arquivos por componente;• a ordem é importante;
Feio, o que eu devo fazer?
