Modular CSS - Projetando CSS para aplicativos

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