Modular CSS - Projetando CSS para aplicativos

7,240 views
7,137 views

Published on

Palestra sobre Modular CSS apresentada na QConSP 2012

Published in: Technology
2 Comments
37 Likes
Statistics
Notes
No Downloads
Views
Total views
7,240
On SlideShare
0
From Embeds
0
Number of Embeds
1,846
Actions
Shares
0
Downloads
148
Comments
2
Likes
37
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

    ×