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
Upcoming SlideShare
Loading in...5
×

Modular CSS - Projetando CSS para aplicativos

6,701

Published on

Palestra sobre Modular CSS apresentada na QConSP 2012

Published in: Technology
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,701
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
140
Comments
2
Likes
36
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×