Por que?
•Padronizados• Integrados•Estilos diferentes
•Foco no visual•Produção linear
•Refação
Realidade
De quem é a culpa?Mas de quem é a culpa?
Site ≠ APP
Site - Foco em
•Estilo•Diagramação•Primeiro impacto
APP - Foco em
•Estilo•Funcionalidades•Condução
GRID 960LESS Framework
FoundationGolden Grid
SemanticSkeleton
Etc.
Nããããããããããããããããããããã
ããããããããããããããããããããããããããããããããã
ão.
Sei que agora muitos de vocês estão me odiando…
#mimimimi
Diagramação do site engessa o código
Vamos voltar um pouquinho no tempo
HTML = conteúdo
CSS = estilo
Por que então vamos mudar isso?
O que não queremos ver
<div class=” "> ...</div>
grid_2 omega
Contras
• .Grid-4-12 = .texto-azul•Manutenções dolorosas•Orienta o Design e não o contrário
Ah! Mas e o Semantic.gs?
Ah! Mas e os novos Mixins para
Blueprint e Sass?
Contras
• .Grid-4-12 = .texto-azul•Manutenções dolorosas•Orienta o Design e não o contrário
•Dependência?
Framework agiliza a codificação
Usar slicer também
Recomendo GRIDs e Frameworks
para prototipagem
Crie seu próprio Framework
Eles criaram:YUI, Twitter Bootstrap, Abril Bootstrap, Peixe
Urbano Bootstrap
O Negócio deles não é igual ao seu
Pensando no seu projeto
Evite utilizar herança
.widget h2 {}
.widget-tt {}
.nav a {}
.nav-link {}
Evite utilizar IDs para estilização
#submit {}
.botao {}
<form role="search" method="get" id="searchform" action=“">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search” />
</div>
</form>
Foque na função e não no estilo
Nem no conteúdo
.bloco-claro {}
.ultimos-pedidos {}
.box {}
Pense em reutilização
Dicas para reutilização
•Classes globais•Testar em outro local•Testar variações•Documentação
A inteligência do seu código
Class=“b”
Class=“b b-pri”
Class=“b b-small”
Class=“b b-small b-pri”
Tooltip
<div class="tooltip”> <hgroup class="tooltip-h"> <h2 class="tooltip-tt">Reason:</h2> </hgroup> <section class="tooltip-body”></section></div>
Wizard
<ul class="steps">
<li class="checked"><span>1</span> About your campaign</li>
<li class="active"><span>2</span> Segmentation</li>
<li><span>3</span> Set your budget</li>
<li><span>4</span> Add your creatives</li>
</ul>
Standards (padrões)
•Títulos e textos•Navegações•Tabs (abas)•Objetos de formulário
Estudo de caso
Cenário - Petrobras
• 12 projetos simultâneos•Mais de 40 programadores•Equipe com 5 designers/
front-end
Motivadores
• 50% formulário, 50% tabela• Nenhum padrão de código ou
classes• Nenhuma reutilização• Sem acesso ao Visual Studio
Objetivos
• Fácil diagramação• Fácil customização por projeto• Responsive ou fluido• Boa documentação
Framework de Formulário
30kdownloads
DRY CSSDon’t Repeat Your CSS
DRY CSS
• Modularizado• Facilmente integrado• Vinculado ao estilo• Vinculado ao ID• Lowercase e Uppercase
OOCSSObject oriented cascading style sheet
Objected Oriented CSS
• Separação da estrutura e do estilo• Criação de elementos globais• É um processo tácito• Existe um framework com o
mesmo nome
SMACSSScalable and Modular Architecture for CSS
SMACSS
• Categorização do CSS em: base, layout, modules, states e theme• Módulos independentes• Muito engessado• Não está aberto
BEMBlock Element Modifier
BEM
• Módulos independentes• Muito complexo• Nomeclatura engessada e falha
(menu__item_state_current)
LESS / SASS
Aplicações1. @color, @lnk-color, @active-color, @em-
color, @hover-bg, @active-bg,…2. @spacing, @spacing-02, @spacing-h,
@spacing-v, .sep, .box-sizing, .clear,…3. .corner(@radius:
4px), .transition(@transition-type: all), .sprite(@sprite-h, @sprite-v),…
Jeremy Clarke
LESS e SASS criam fantásticos DRY-CSS
1. Foge dos padrões2. Dependencia de uma biblioteca externa3. Não é CSS
Reutilização sempre
Então…
1Crie um arquivo externo
Standards
• Sempre atualizado• Se um objeto for utilizado em mais
de 2 lugares, transforme-o em um padrão• Sempre dê um 360 nos padrões
2Uma boa nomeclatura vale ouro
Harry Roberts
Quebrar em mini classes como se tivesse pedindo um sanduiche no Subway
#sanduiche
.pao.alface.queijo.tomate.maionese.
Não gosta de tomate, é só remover
3Envolva sua equipe no processo de padronização
4Não deixe de inventar coisas
http://mzl.la/M0cLQC
5Prototipe
Agora é com vocês! Obrigado! @bernarddeluna