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ããããããããããããããããããããã
ããããããããããããããããããããããããããããããããã
ão.
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-t...
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 ...
Wizard<ul class="steps">   <li class="checked"><span>1</span> About your campaign</li>   <li class="active"><span>2</span>...
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 S...
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 ...
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á ...
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,...
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 3...
2Uma boa nomeclatura vale ouro
Harry Roberts Quebrar em mini classes como se tivesse    pedindo um sanduiche no Subway             #sanduiche.pao.alface....
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
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Próximos SlideShares
Carregando em…5
×

Modular CSS - Projetando CSS para aplicativos

7.684 visualizações

Publicada em

Palestra sobre Modular CSS apresentada na QConSP 2012

Publicada em: Tecnologia

Modular CSS - Projetando CSS para aplicativos

  1. 1. Por que?
  2. 2. • Padronizados• Integrados• Estilos diferentes
  3. 3. Realidade• Foco no visual• Produção linear• Refação
  4. 4. De quem é a culpa? Mas de quem é a culpa?
  5. 5. Site ≠ APP
  6. 6. Site - Foco em• Estilo• Diagramação• Primeiro impacto
  7. 7. APP - Foco em• Estilo• Funcionalidades• Condução
  8. 8. GRID 960LESS Framework Foundation Golden Grid Semantic Skeleton Etc.
  9. 9. Nããããããããããããããããããããã
  10. 10. ããããããããããããããããããããããããããããããããã
  11. 11. ão.
  12. 12. Sei que agora muitos devocês estão me odiando…#mimimimi
  13. 13. Diagramação do site engessa o código
  14. 14. Vamos voltar um pouquinho no tempo
  15. 15. HTML = conteúdo CSS = estilo
  16. 16. Por que entãovamos mudar isso?
  17. 17. O que não queremos ver<div class=”grid_2 omega "> ...</div>
  18. 18. Contras• .Grid-4-12 = .texto-azul• Manutenções dolorosas• Orienta o Design e não o contrário
  19. 19. Ah! Mas e oSemantic.gs?
  20. 20. Ah! Mas e os novos Mixins para Blueprint e Sass?
  21. 21. Contras• .Grid-4-12 = .texto-azul• Manutenções dolorosas• Orienta o Design e não o contrário• Dependência?
  22. 22. Framework agiliza a codificação
  23. 23. Usar slicer também
  24. 24. Recomendo GRIDs e Frameworkspara prototipagem
  25. 25. Crie seu próprio Framework
  26. 26. Eles criaram:YUI, Twitter Bootstrap,Abril Bootstrap, Peixe Urbano Bootstrap
  27. 27. O Negócio deles não é igual ao seu
  28. 28. Pensando no seu projeto
  29. 29. Evite utilizar herança
  30. 30. .widget h2 {}.widget-tt {}
  31. 31. .nav a {}.nav-link {}
  32. 32. Evite utilizar IDspara estilização
  33. 33. #submit {}.botao {}
  34. 34. <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>
  35. 35. Foque na função e não no estiloNem no conteúdo
  36. 36. .bloco-claro {}.ultimos-pedidos {} .box {}
  37. 37. Pense em reutilização
  38. 38. Dicas para reutilização• Classes globais• Testar em outro local• Testar variações• Documentação
  39. 39. A inteligência do seu código
  40. 40. Class=“b” Class=“b b-pri” Class=“b b-small”Class=“b b-small b-pri”
  41. 41. Tooltip<div class="tooltip”> <hgroup class="tooltip-h"> <h2 class="tooltip-tt">Reason:</h2> </hgroup> <section class="tooltip-body”></section></div>
  42. 42. 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>
  43. 43. Standards (padrões)• Títulos e textos• Navegações• Tabs (abas)• Objetos de formulário
  44. 44. Estudo de caso
  45. 45. Cenário - Petrobras• 12 projetos simultâneos• Mais de 40 programadores• Equipe com 5 designers/ front-end
  46. 46. Motivadores• 50% formulário, 50% tabela• Nenhum padrão de código ou classes• Nenhuma reutilização• Sem acesso ao Visual Studio
  47. 47. Objetivos• Fácil diagramação• Fácil customização por projeto• Responsive ou fluido• Boa documentação
  48. 48. Framework de Formulário
  49. 49. 30kdownloads
  50. 50. DRY CSS Don’t Repeat Your CSS
  51. 51. DRY CSS• Modularizado• Facilmente integrado• Vinculado ao estilo• Vinculado ao ID• Lowercase e Uppercase
  52. 52. OOCSSObject oriented cascading style sheet
  53. 53. 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
  54. 54. SMACSSScalable and Modular Architecture for CSS
  55. 55. SMACSS• Categorização do CSS em: base, layout, modules, states e theme• Módulos independentes• Muito engessado• Não está aberto
  56. 56. BEMBlock Element Modifier
  57. 57. BEM• Módulos independentes• Muito complexo• Nomeclatura engessada e falha (menu__item_state_current)
  58. 58. LESS / SASS
  59. 59. 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),…
  60. 60. Jeremy Clarke LESS e SASS criam fantásticos DRY-CSS1. Foge dos padrões2. Dependencia de uma biblioteca externa3. Não é CSS
  61. 61. Reutilização sempre
  62. 62. Então…
  63. 63. 1Crie um arquivo externo
  64. 64. 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
  65. 65. 2Uma boa nomeclatura vale ouro
  66. 66. 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
  67. 67. 3Envolva sua equipe no processo de padronização
  68. 68. 4Não deixe de inventar coisas
  69. 69. http://mzl.la/M0cLQC
  70. 70. 5Prototipe
  71. 71. Agora é com vocês! Obrigado! @bernarddeluna

×