Modular CSS - Projetando CSS para aplicativos

Por que?

• Padronizados• Integrados• Estilos diferentes

Realidade• Foco no visual• Produção linear• Refação

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 Foundation Golden Grid Semantic Skeleton Etc.

Nããããããããããããããããããããã

ããããããããããããããããããããããããããããããããã

Sei que agora muitos devocê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ãovamos mudar isso?

O que não queremos ver<div class=”grid_2 omega "> ...</div>

Contras• .Grid-4-12 = .texto-azul• Manutenções dolorosas• Orienta o Design e não o contrário

Ah! Mas e oSemantic.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 Frameworkspara 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 IDspara 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 estiloNem 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 CSS Don’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-CSS1. 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

http://bernarddeluna.com	634
http://tutsmais.com.br	297
https://twitter.com	43
http://candidosg.com	38
http://us-w1.rockmelt.com	29
http://psdcorporate.test.mineus.cz	6
http://flavors.me	6
http://jp.flavors.me	4
http://localhost	2
https://si0.twimg.com	2
http://fr.flavors.me	1
http://de.flavors.me	1
http://es.flavors.me	1
http://candidosalesg.wordpress.com	1

Modular CSS - Projetando CSS para aplicativos

by Bernard De Luna on Aug 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 1,065

Statistics

Modular CSS - Projetando CSS para aplicativos Presentation Transcript