Más contenido relacionado La actualidad más candente (20) Similar a Modular CSS - Projetando CSS para aplicativos (20) Más de Bunee.io - Hiring with Intelligence (20) Modular CSS - Projetando CSS para aplicativos9. Site - Foco em
• Estilo
• Diagramação
• Primeiro impacto
10. APP - Foco em
• Estilo
• Funcionalidades
• Condução
20. O que não queremos ver
<div class=”grid_2 omega ">
...
</div>
23. Ah! Mas e os novos
Mixins para
Blueprint e Sass?
24. Contras
• .Grid-4-12 = .texto-azul
• Manutenções dolorosas
• Orienta o Design e não o
contrário
• Dependência?
37. <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>
45. Class=“b”
Class=“b b-pri”
Class=“b b-small”
Class=“b b-small b-pri”
46. Tooltip
<div class="tooltip”>
<hgroup class="tooltip-h">
<h2 class="tooltip-tt">Reason:</h2>
</hgroup>
<section class="tooltip-body”></section>
</div>
47. 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>
50. Cenário - Petrobras
• 12 projetos simultâneos
• Mais de 40 programadores
• Equipe com 5 designers/
front-end
65. 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
68. SMACSS
• Categorização do CSS em: base,
layout, modules, states e theme
• Módulos independentes
• Muito engessado
• Não está aberto
74. Aplicações
1. @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),…
75. Jeremy Clarke
LESS e SASS criam fantásticos DRY-CSS
1. Foge dos padrões
2. Dependencia de uma biblioteca externa
3. Não é CSS
81. 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