HTML/CSS patterns for optimized layouts and semantics

globo
.com
HTML/CSS Patterns
Leonardo Quixadá

O Que Não Vou Apresentar
‣ Fundamentos de seletores
‣ Aplicação de propriedades
‣ Tableless
‣ Performance
‣ CSS3

Guidelines
‣ CSS
‣ Reset.css ou normalize.css
‣ Grids

‣ HTML & CSS
‣ Tableless

Problemas comuns
‣ Layout em CSS não é fácil de aplicar, nem de explicar
‣ Não existe sandbox, há muitos conﬂitos de
propriedades
‣ Inconsistência cross-browser
‣ Não é automaticamente testável

Estrutura para HTML & CSS
‣ Agilizar a criação e a manutenção de componentes.
‣ Melhorar a limpeza, a clareza e a ﬂexibilidade tanto do
HTML, como do CSS.
‣ Diminuir o tempo desperdiçado fazendo ajustes para
um browser em especíﬁco.

Regras de Ouro
1. Separar container de conteúdo
2. Separar estrutura de estética

-- Nicole Sulivan (Yahoo!), em OOCSS

Cronograma

HTML CSS
Patterns Patterns
Grids Seletores
Estratégias
Minidocumentos Propriedades de Mundo
Validação
Microsemântica Layout
Pós-IE6

Modelo Globocore
page

macroarea

área
box (widgets
& destaques)

HTML Patterns
‣ Grids
‣ Minidocumentos
‣ Microsemântica

Grids

“Todo trabalho de design envolve a solução de problemas
em níveis visuais e organizativos. Figuras, símbolos, massa de
textos, títulos e tabelas devem se reunir para transmitir
informação. O grid é uma maneira de juntar esses
elementos.”
- Luiz Agner, designer, arquiteto e professor

Fonte: http://www.slideshare.net/agner/a-construo-do-grid

Grids

“O grid introduz uma ordem sistemática num leiaute e
permite que o designer diagrame uma grande quantidade de
informação. Também permite vários colaboradores num
mesmo projeto.”


Grids

“Vantagens do grid:
- Clareza
- Eﬁciência
- Economia
- Identidade”


Grids
‣ Padrão de-facto para layouts em CSS.
‣ Permite o intercâmbio de componentes entre
produtos
‣ Define o espaço horizontal que os componentes
podem ocupar (o conteúdo dos componentes
definem o espaço vertical)
‣ Dada uma largura fixa, pode-se compor “linhas” com
até 12 colunas.

Grids: Colunas
‣ 1 unidade ou coluna de 1:

<div class=”glb-grid-1”></div>

width (60px)

margin-left (10px) margin-right (10px)

Grids: Colunas
‣ 2 unidades:

grid 1 grid-1

10px 60px 20px 60px 10px

‣ coluna de 2:
10px 140px 10px

grid-2


Grids: Colunas
‣ 3 unidades:
grid 1 grid-1 grid-1

10px 60px 20px 60px 20px 60px 10px

grid 1 grid-2

10px 60px 20px 140px 10px

‣ coluna de 3:
10px 220px 10px

grid-3


Grids: Colunas
‣ 4 unidades:
grid 1 grid-1 grid-1 grid-1

10px 60px 20px 60px 20px 60px 20px 60px 10px

grid 1 grid-2 grid-1

10px 60px 20px 140px 20px 60px 10px

‣ coluna de 4:
10px 300px 10px

grid-4


Grids: Linhas
‣ As linhas podem ser deﬁnidas por blocos ou unidades
do grid.

glb-bloco

glb-grid 2 glb-grid-8 glb-grid-2

<div class=”glb-bloco”>
</div>

Grids: Linhas
‣ As linhas podem ser deﬁnidas por blocos ou unidades
do grid.

glb-grid-4

glb-grid 1 glb-grid-2 glb-grid-1

<div class=”glb-grid-4”>
<div class=”glb-grid-1 glb-primeiro”></div>
<div class=”glb-grid-1 glb-ultimo”></div>
</div>

Grids: Exemplo
<body>
<div id=”glb-doc”>
<div class=”glb-topo”>
...
</div>
<div class=”glb-conteudo”>
...
</div>
<div class=”glb-rodape”>
...
</div>
</div>
</body>

Grids: Exemplo

<div class="glb-topo">

<div class="glb-bloco">
<div class="glb-grid-4"></div>
</div>

</div>

Grids: Exemplo
<div class="glb-conteudo">
</div>

</div>
</div>

Grids: Exemplo

<div class="glb-rodape">

</div>

</div>

Exercício: Implementar
header

1 2
3
4 5

6 7

8 9 10

footer

Minidocumentos
‣ Pattern que subdivide páginas web em pequenos
“documentos” autosuﬁcientes.
‣ É como um pequeno grid para os componentes que
vão preencher os compartimentos da estante.
‣ Juntando-se vários componentes formam-se
composições sólidas.

Minidocumentos
‣ Podem ser utilizados por widgets, destaques, forms,
menus, etc...
‣ Baseado nas novas tags do HTML 5: article, section,
header e footer.

Menu & Widget Lateral

Header


Content


Footer

Pattern Visual
Container

Header

Content

Footer

Pattern Visual
Container

Títulos, menus, logos...

Todo o conteúdo

Links “veja mais”, botões, informações extras...

Pattern HTML
<div class=”container”>
<div class=”header”>
...
</div>
<div class=”content”>
...
</div>
<div class=”footer”>
...
</div>
</div>

Pattern Página
<div class=”glb-doc”>
<div class=”glb-top”>
...
</div>
<div class=”glb-content”>
...
</div>
<div class=”glb-base”>
...
</div>
</div>

Pattern Matéria
<div class=”materia”>
...
</div>
...
</div>
<div class=”base”>
...
</div>
</div>

Pattern Box
<div class=”box”>
...
</div>
...
</div>
...
</div>
</div>

Box Plantão
<div class=”box box-plantao”>
...
</div>
...
</div>
...
</div>
</div>

Se você usasse HTML5...
<section class=”box box-plantao”>
<header>
...
</header>
<section>
...
</section>
<footer>
...
</footer>
</section>

Box Plantão
...
</div> 
...
</div> 
...
</div> 
</div>

Favor, não misturar <div>s
ou .classes de grid com
box.

Microsemântica
‣ Utilização de elementos semânticos para descrever
dados através de tags e/ou classes.
‣ É uma variação dos Microdados e, antigamente, de
Microformatos.
‣ Não serve paras os search engines, apenas melhora a
clareza do código.

Microsemântica
‣ É a partir daqui que se preocupa com:
‣ SEO
‣ Semântica
‣ Acessibilidade
‣ Microdados
‣ ...

Microdados
“Microdados é uma especiﬁcação WHATWG HTML5
usada para aninhar semântica dentro de conteúdos
existentes em páginas web.
Isso é feito usando atributos especíﬁcos: itemscope,
itemtype, itemid, itemprop e itemref.
Search engines, web crawlers, e navegadores podem
extrair e processar microdados a partir de uma página
web e usar isso para prover uma experiência de
navegação mais rica para os usuários.”
- Wikipedia

Microdados: Exemplo
<div>
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>

Microdados: Exemplo
<div itemscope>
<h1>Avatar</h1>
<span>
Director:
James Cameron
</span>
</div>

Microdados: Exemplo
<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<span>
Director:
James Cameron
</span>
</div>

Microdados: Exemplo
<h1 itemprop="name">Avatar</h1>
<span>
Director:
<span itemprop="director">James Cameron</span>
</span>
<span itemprop="genre">Science fiction</span>
<a href="/movies/avatar.html" itemprop="trailer">Trailer</a>
</div>

Microdados: Exemplo
<h1 itemprop="name">Avatar</h1>
<span itemprop="director" itemscope itemtype="http://schema.org/
Person">
Director:
<span itemprop="name">James Cameron</span>
(born <span itemprop="birthDate">August 16, 1954)</span>
</span>
<span itemprop="genre">Science fiction</span>
<a href="/movies/avatar.html" itemprop="trailer">Trailer</a>
</div>

Microdados
‣ Mais exemplos em: http://schema.org

Microformatos
‣ Cartões
<div class="vcard">
<span class="fn">Nome</span>
<span class="org">Organização</span>
<span class="tel">604-555-1234</span>
<a class="url" href="http://site.com/">Website</a>
</div>

‣ Calendário
‣ Reviews

Microsemântica
‣ Por que não fazer nossos próprios microdados?
‣ HTML com mais semântica e mais entendível.

Box Plantão
...
</div>
...
</div>
....
</div>
</div>

Box Plantão
...
<ul>
<li> ... </li>
<li> ... </li>
...
</ul>
</div>
...
</div>

Box Plantão
<ul>
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<span class=”chapeu”></span>
<span class=”titulo”></span>
</a>
</li>
...
</ul>

Box Plantão
<ul>
<li>
</a>
</li>
...
</ul> não dizem nada

Box Plantão
<ul>
<li>
</a>
</li>
...
</ul>
semântico!!!

A partir daqui, nada de
grid, e evite ao máximo
utilizar <div>s.

Box Plantão

div.box-plantao a { ... }
div.box-plantao a.noticia { ... }
div.box-plantao span.chapeu { ... }
div.box-plantao span.titulo { ... }
div.box-plantao ul { ... }

Vejamos rapidamente
outro box...

Box Previsão do Tempo
Vc consegue classiﬁcar semanticamente o
content do box?

Outro exemplo....

div.brother-main

Outro exemplo....

cite.brother-tweet
span.brother-idade
span.brother-cidade-natal

span.brother-signo cite.brother-tweet-tempo
span.brother-time

Dica!

<div> para descrever estrutura,
<span> para descrever dados

Exercício
‣ Transforme um box em HTML:

Estratégias
‣ Organizando Seletores
‣ Organizando Propriedades
‣ Elaborando Layouts

Organizando Seletores
‣ Namespaces: deﬁne a área de atuação dos seletores e
os agrupa visualmente.
‣ tag[.class].
‣ Separação por blocos.
‣ Ordem: especiﬁcidade, alfabética.

Namespaces

div.box-plantao { ... }
div.box-plantao h6 { ... }
div.box-plantao li { ... }
div.box-plantao span.barra { ... }

Namespaces


Contexto ou Namespace

tag[.class]

tag[.class] 1

tag[.class]

tag[.class] 2

tag[.class]
‣ jQuery
$(‘div.box-plantao span.barra’)
ou $(‘div.box-plantao’).ﬁnd(‘span.barra’) (para cachear o contexto)

‣ Lxml
html = lxml.etree.fromstring(response.content)
html.cssselect(‘div.box-plantao span.barra’)
‣ splinter
browser = Browser()
browser.ﬁnd_by_css(‘div.box-plantao span.barra’)

tag[.class]
‣ Problemas de se utilizar só a classe:
‣ Desenvolvedores são muito ruins em nomear coisas.
‣ O nome da tag é tão objetivo quanto uma ordem
alfabética. Melhor utilizar os tokens já predeﬁnidos
do que ﬁcar elaborando nomes malucos.
‣ Classes abertas indicam pra outros devs, que é
permitido colocar a classe em qualquer tag.

tag[.class]
‣ Exemplos:
.ﬁeldset-metadados ﬁeldset.metadados
(exemplo do widget SEO)

.span_tag span.tag
(catálogo de vídeo v1.0)

.formulario-criacao-usuario form.criacao-usuario

‣ Só utilizar classes abertas quando é realmente
necessário aplicar a mais de uma tag (exemplo th, td).

tag[.class]
‣ Recomendo sempre ter 2 tag[.class]. Claro e conciso!
‣ Mínimo de 1 tag[.class]
‣ Máximo (prometa!) de 3 tag[.class]
div.box-plantao ul.principal li.ativo { ... }

Separação por blocos
div.box { ... }
div.box a { ... }
div.box span.barra { ... }


div#box-plantao-principal h6 { ... }
div#box-plantao-principal li { ... }

Separação por blocos
div.box { ... }
bloco
div.box a { ... }

bloco div.box-plantao li { ... }

bloco

Ordem
menos especíﬁco

div.box { ... }
div.box a { ... }


mais especíﬁco

Ordem
div.box { ... }
div.box a { ... }
ordem alfabética



Teu HTML ficaria assim...
<h6>primeira página</h6>
</div>
<ul>
<li></li>
...
</ul>
</div>
<a href=”#”>veja mais</a>
</div>
</div>

E teu CSS ficaria assim...
div.box { ... }
div.box a { ... }



6.2 Organizando Propriedades

Organizando Propriedades
‣ Uma propriedade:valor por linha
‣ Separar propriedades por contexto

Uma propriedade por linha
‣ Facilita diffs!

‣ Inserir comentários é mais tranquilo

‣ CSS 3 com vendor preﬁx são bem longos e variados

.box_shadow {
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}

‣ CSS 3 com vendor preﬁx são bem longos e variados

.box_gradient {
background-color: #444444;
/* Saf4+, Chrome */
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444),
to(#999999));
/* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444',
EndColorStr='#999999'); /* IE6-IE9 */
}

Organizando Propriedades
‣ 1o grupo: layout
position, display, ﬂoat, top, left, bottom, right, margin, padding,
width, height
‣ 2o grupo: texto
color, font, letter-spacing, line-height, text-align, text-decoration,
text-transform...
‣ 3o grupo: restante
border, z-index, overﬂow, ...

importante!
EVITE o !important

Prequel
‣ 1o grupo: layout
position, display, ﬂoat, top, left, bottom, right, margin, padding,
width, height
‣ 2o grupo: texto
color, font, letter-spacing, line-height, text-align, text-decoration,
text-transform...
‣ 3o grupo: restante
border, z-index, overﬂow, ...

Float:Left contra o Mundo
‣ O ﬂoat serve para alinhar à esquerda, à direita ou não
alinhar (none).
‣ A propriedade tem a ver mais com conteúdo do que
com boxes.
‣ Suas dimensões são reduzidas para acomodar apenas
o próprio conteúdo ao contrário de display:block.
‣ É fonte de muitas confusões no mundo CSS.

Float:Left em Quadrinhos
A

B

C

A

B

C

‣ A
‣ B { ﬂoat:left; }
‣ C

A

B C

‣ Box B perdeu espaço no ﬂow de boxes, mas
ocupou espaço à esquerda do conteúdo C, ou seja,
virou conteúdo.

A

B

C

‣ A
‣ B { ﬂoat:left; }
‣ C { ﬂoat:left; }

A
A

B C

‣ B se alinhou à esquerda antes de C. Como saíram
do ﬂow de boxes, a altura de A diminuiu.
‣ É como se estivessem caçando conteúdo abaixo.

Float:Left contra o Mundo
‣ Float:left/right tem um funcionamento difícil de
entender e de explicar.
‣ A maioria dos bugs nos IEs encontrados e registrados
pelo Position Is Everything tem o ﬂoat envolvido.
http://www.positioniseverything.net/explorer.html
‣ Recomendação: evitar ao máximo.

Alternativas ao float:left

{
inline
display block
inline-block

{
static
relative
position
absolute
ﬁxed

Antes de existir o CSS...
‣ No HTML, os elementos são divididos em inline-level
(também chamado de text-level) e block-level.
‣ Elementos inline-level (também chamados de text-
level) são os que convivem lado-a-lado com texto e
outro elementos inline-level.
‣ Elementos block-level são containers para
elementos inline-level, textos e outros elementos
block-level

Elementos inline-level Elementos block-level

<input> <a> <form>
<label> <img> <blockquote>
<div>
<li> <td>
<button> <cite> <em>
<ﬁeldset>
<th>
<strong> <span> <p>
<textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>

Elementos inline-level <dentro de> Elementos block-level

<input> <a> <form>
W3C
<div>
<li> <td>
<ﬁeldset>
<th>
<strong> <span> <p>


<input> <a> <form>
W3C
<div>
<li> <td>
W3C <ﬁeldset>
<th>
<strong> <span> <p>

W3C

‣ Leitura recomendada (é curto, prometo!):
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
‣ Regras da estrutura HTML:
http://www.w3.org/TR/html4/strict.dtd

Nunca, nunca coloque
elementos block-level
dentro de inline-level.

Displays
‣ Os dois tipos básicos de display são:
‣ display:block permite um elemento ser
dimensionado com width, height, padding, margin,
etc.
‣ display:inline permite ﬁcar lado-a-lado com outros
elementos e textos. Não pode ser dimensionado
com width e height. Apenas com valores laterais de
margin.

Display:Inline-block
‣ Junta características de elementos inlines e blocks.
‣ Permite ﬁcar lado-a-lado com outros elementos e ser
dimensionados.
‣ É mais intuitivo de aplicar e explicar.
‣ É tratado como parte do texto.

‣ Propriedade também consistente no cross-browser.
‣ No IE7, é simulado por *display:inline e *zoom:1.

* isto não é uma nota de rodapé, é um hack pro IE.

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc massa sapien,
rutrum ac dignissim at, iaculis sit amet
libero. Aenean vehicula tortor vitae eros
pulvinar quis consectetur arcu suscipit.

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nunc massa sapien.Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aenean
vehicula tortor vitae eros pulvinar quis consectetur arcu suscipit.

display:inline-block

Exemplo de Uso

display:inline-block

Position:Absolute
‣ Propriedade bem consistente cross-browser. Portanto
bem mais seguro de se usar do que o ﬂoat.
‣ É sempre utilizado com uma ou mais das seguintes
propriedades: top, bottom, left, right.

Position:Absolute

<div> com
position:relative

Position:Absolute

<div> com <div> sem
position:relative position

Position:Absolute

<div> com <div> sem <div> com
position:relative position position:absolute

Position:Absolute
top:150px

left:300px

<div> com <div> sem <div> com
position:relative position position:absolute

Recomendação
‣ Tente utilizar na seguinte ordem:
1.não usar nada (css padrão do navegador)
2.display:inline-block
3.position:absolute
...
...
4.ﬂoat:left

Exercício
‣ Fazer o seguinte box:

‣ Utilize o jsﬁddle.net e o dummyimage.com

7 Estratégias de Validação

Estratégias

de Validação
‣ Em vs Px
‣ Hacks

Em vs Px
‣ “em” é uma unidade de medida relativa e mais
ﬂexível. 1em = 100%, logo 1.02em=102%.
‣ “px” é uma unidade de medida absoluta e mais
intuitiva. 1px é 1px e ponto ﬁnal.

Funcionamento do “em”
12px

1.2em

0.714em

14,4px 10px

Em vs Px
‣ As principais vantagens do “em” são:
‣ O tamanho da página aumenta conforme o
tamanho da fonte pré-deﬁnida pelo usuário em seu
navegador.
‣ A funcionalidade aumentar/diminuir fonte do IE6/7
só funciona com unidades de medidas.
‣ Se adapta melhor em telas pequenas como a de
celulares.

Em vs Px
‣ As principais desvantagens do “em” são:
‣ Número quebrado gera inconsistência entre
navegadores por causa do cálculo de conversão
para px. Ex.: 1.33em pode ser 15px em um
navegador, e 16px em outro.
‣ Todo valor em “em” tem que ser previamente
calculado de acordo com o elemento pai.

Em vs Px
‣ Vantagens do “px”:
‣ Previsibilidade: 1px = 1px e pronto!
‣ É a unidade padrão dos designers

Recomendação
‣ Use apenas “px.” O desenvolvimento front-end já é
instável o suﬁciente.
‣ Caso esteja interessado na ﬂexibilidade do “em,”
considere utilizar o “rem.”

Hacks
‣ Evite ao máximo utilizá-los.
‣ É completamente possível fazer o mesmo CSS para
Firefox, Chrome, Safari e Opera. (excetuando
propriedades novas como border-radius e transition)
‣ Para IE o transtorno é tão grande que compensa
utilizar hacks.

Hacks: Quando usar?
‣ O mais recomendado no mercado é fazer conditional
comments.
‣ Mas a experiência mostra que da seguinte forma é
mais manutenível (na ordem):
‣ IE 9-: margin: 15px9;
‣ IE 7-: *margin: 15px;
‣ IE 6-: _margin: 15px;

Validação de Browsers
Ordem de preferência (ou audiência)

Ordem de recência
9

8

7

Referências
‣ CSS Compatibility and Internet Explorer
(http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx)

‣ When Can I Use...
(http://caniuse.com)

‣ CSS Frameworks (video com um overview)
(http://www.youtube.com/watch?v=EuhDIRzUJgc)

‣ Explorer Exposed!
(http://www.positioniseverything.net/explorer.html)

Ferramentas
‣ jsFiddle.net
(http://jsﬁddle.net)

‣ Dummy Images
(http://dummyimage.com)

‣ Lorem Ipsum
(http://lipsum.com)

Exemplos e Exercícios
‣ Exemplo de Grid
(http://jsfiddle.net/lquixada/KVSNn/show/)

‣ Exercício do Grid
(http://jsfiddle.net/lquixada/qxxkK/show/)

‣ Exercício do Box Nas Novelas
(http://jsfiddle.net/lquixada/6mWM7/show/)

HTML/CSS patterns for optimized layouts and semantics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML/CSS patterns for optimized layouts and semantics

Similar to HTML/CSS patterns for optimized layouts and semantics (20)

HTML/CSS patterns for optimized layouts and semantics

Editor's Notes