Arquitetura CSS

1.636 visualizações

Publicada em

Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?

Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.

Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.

Publicada em: Design
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.636
No SlideShare
0
A partir de incorporações
0
Número de incorporações
64
Ações
Compartilhamentos
0
Downloads
46
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Arquitetura CSS

  1. 1. ARQUITETURA CSS @rafaelrinaldi
  2. 2. ⓞ https://magnetis.com.br
  3. 3. ⓞ https://magnetis.com.br Estamos contratando!
  4. 4. ⓞ https://sp.femug.com FEMUG
  5. 5. Disclaimer
  6. 6. Não vou utilizar o gif to Peter Griffin durante a palestra! peter_griffin_css.gif
  7. 7. Desenvolver interfaces para a web é muito mais do que um problema exclusivo do CSS
  8. 8. Conteúdo Apresentação (e agora também animações) Comportamento e interações mais complexas ⓞ http://alistapart.com/article/understandingprogressiveenhancement
  9. 9. CSS funciona. Poderia ser muito pior!
  10. 10. Técnicas
  11. 11. Técnicas ≠ Frameworks / Bibliotecas
  12. 12. OOCSS ⓞ https://github.com/stubbornella/oocss/wiki
  13. 13. Object Oriented CSS ⓞ https://github.com/stubbornella/oocss/wiki
  14. 14. Influenciado pelo paradigma da orientação a objetos Técnicas → OOCSS
  15. 15. CSS “object” Técnicas → OOCSS
  16. 16. Padrão visual que se repete e que pode ser abstraído em um contexto próprio Técnicas → OOCSS
  17. 17. Separar estrutura de marcação de variações visuais Técnicas → OOCSS
  18. 18. Separar o conteúdo seu contexto Técnicas → OOCSS
  19. 19. SMACSS ⓞ http://smacss.com
  20. 20. Scalable and Modular Architecture for CSS ⓞ http://smacss.com
  21. 21. Feito para resolver problemas específicos do Yahoo! Mail Técnicas → SMACSS
  22. 22. ›❯ Base; ›❯ Layout; ›❯ Module; ›❯ State; ›❯ Theme. Técnicas → SMACSS
  23. 23. SMACSS → Base Técnicas → SMACSS → Base
  24. 24. Regras padrão de estilo Técnicas → SMACSS → Base
  25. 25. html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background: #bada55; } input[type=text] { border: 2px solid #444; } Técnicas → SMACSS → Base
  26. 26. SMACSS → Layout Técnicas → SMACSS → Layout
  27. 27. ›❯ Utilizado por elementos fixos da aplicação; ›❯ Seletor único, não reutilizável; ›❯ Variações são representadas por classes com o prefixo l . Técnicas → SMACSS → Layout
  28. 28. #header { font-size: 2em; color: fuchsia; width: 100%; height: 15em; line-height: 1.5; /* dica: não precisa especificar unidade aqui */ } #sidebar { font-size: .75em; color: gray; float: right; } .l-inverse #sidebar { float: left; } Técnicas → SMACSS → Layout
  29. 29. SMACSS → Modules Técnicas → SMACSS → Modules
  30. 30. ›❯ Trechos de código reutilizáveis; ›❯ Partes modulares do design; ›❯ Padrões. Técnicas → SMACSS → Modules
  31. 31. SMACSS → State Técnicas → SMACSS → State
  32. 32. ›❯ Como os módulos irão se apresentar em estados específicos; ›❯ Representado por classes com o prefixo is . Técnicas → SMACSS → State
  33. 33. .sidebar.is-expanded { opacity: 1; } .button.is-disabled { cursor: not-allowed; background: lightgray; opacity: .75; pointer-events: none; /* capeta */ } Técnicas → SMACSS → State
  34. 34. SMACSS → Theme Técnicas → SMACSS → Theme
  35. 35. Utilizado apenas em aplicações que possuem opções de variação visual Técnicas → SMACSS → Theme
  36. 36. /* No arquivo do componente botão */ .button { border: 1px solid; } /* No arquivo de tema do botão */ .button { border-color: fuchsia; background: seagreen; font-family: 'Ubuntu Mono', monospace; } Técnicas → SMACSS → Theme
  37. 37. BEM ⓞ http://bem.info
  38. 38. Block Element Modifier ⓞ http://bem.info
  39. 39. Feito para resolver problemas específicos do Yandex Técnicas → BEM
  40. 40. ›❯ Facilitar a manutenção de projetos de longa duração; ›❯ Facilidade de entendimento do código; ›❯ Diminuir curva de aprendizado em novos membros do time; ›❯ Reutilização de código. Técnicas → BEM
  41. 41. BEM → Block Técnicas → BEM → Block
  42. 42. Entidade independente que é capaz de conter outros blocos Técnicas → BEM → Block
  43. 43. Técnicas → BEM → Block
  44. 44. Técnicas → BEM → Block
  45. 45. BEM → Element Técnicas → BEM → Element
  46. 46. ›❯ Parte de um bloco com uma função específica; ›❯ Não possui um contexto próprio. Técnicas → BEM → Element
  47. 47. Técnicas → BEM → Element
  48. 48. Técnicas → BEM → Element
  49. 49. BEM → Modifier Técnicas → BEM → Modifier
  50. 50. Uma propriedade de um bloco ou elemento que altera seu comportamento Técnicas → BEM → Modifier
  51. 51. Técnicas → BEM → Modifier
  52. 52. Técnicas → BEM → Modifier
  53. 53. BEM → Nomenclatura Técnicas → BEM → Nomenclatura
  54. 54. ›❯ Utiliza-se hífen para separar palavras em nomes longos; ›❯ Underscore duplo para separar um bloco de um elemento; ›❯ PascalCase e camelCase são aceitos. Técnicas → BEM → Nomenclatura
  55. 55. <ul class="list list_size_big list_type_links"> <li class=“list__item”> <a href="/meetup-css">Meetup CSS</a> </li> <li class="list__item list__item_state_active”> <a href=“/femug-sp">FEMUG-SP</a> </li> </ul> Técnicas → BEM → Nomenclatura
  56. 56. SUIT CSS ⓞ https://suitcss.github.io
  57. 57. Criado por desenvolvedores do Twitter numa tentativa de mudar para uma arquitetura baseada em componentes Técnicas → SUIT CSS
  58. 58. SUIT CSS → Nomenclatura Técnicas → SUIT CSS → Nomenclatura
  59. 59. ›❯ Utiliza-se camelCase para separar palavras em nomes longos; ›❯ Utilitários devem começar com o prefixo u . Técnicas → SUIT CSS → Nomenclatura
  60. 60. /* Definição de um componente */ .MyComponent {} /* Definição de um estado */ .MyComponent.is-animating {} /* Definição de um modificador */ .MyComponent--modifier {} /* Definição de subelementos */ .MyComponent-part {} .MyComponent-anotherPart {} Técnicas → SUIT CSS → Nomenclatura
  61. 61. <div class="u-cf"> <a class="u-floatLeft" href="{{url}}"> <img class="u-block" src="{{src}}" alt=""> </a> <p class="u-sizeFill u-textBreak"> </p> </div> Técnicas → SUIT CSS → Nomenclatura
  62. 62. /* Faz o inline de imports procurando por libs instaladas via NPM */ @import "normalize.css"; /* Atalhos para lidar com media queries */ @custom-media --wide-screen (min-width: 80em); /* Valores default */ :root { --base-font-size: 16px; } @media (--wide-screen) { html { /* Utiliza Autoprefixer para lidar c/ vendor prefixes por padrao */ font-size: calc(var(--base-font-size) * 2); } } Técnicas → SUIT CSS → Nomenclatura
  63. 63. ⓞ https://github.com/suitcss/components
  64. 64. Outras abordagens
  65. 65. ⓞ http://www.csstyle.io
  66. 66. Utiliza mixins de Sass para definir estilos Outras Abordagens → csstyle
  67. 67. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle
  68. 68. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Component
  69. 69. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Option
  70. 70. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Tweaks
  71. 71. <a class="button --action +rounded +glass"> Register Now <span class="button__icon --rocket"></span> </a> Outras Abordagens → csstyle Parts
  72. 72. @include component(button) { background: #6bd9ed; padding: 15px; @include option(action){ color: #1f1f1f; background: #a7e040; padding-top: 0; } @include part(icon){ font-size: 34px; position: relative; top: 10px; } @include tweak(rounded) { border-radius: 10px; } } Outras Abordagens → csstyle
  73. 73. ⓞ https://amcss.github.io
  74. 74. Utiliza atributos HTML para definir estilos Outras Abordagens → AMCSS
  75. 75. <!-- Botão padrão --> <a am-Button>Inscrever-se no Meetup CSS SP</a> <!-- Variações do botão --> <a am-Button="primary large”>Informações</a> <a am-Button="info small”>Cancelar inscrição</a> Outras Abordagens → AMCSS
  76. 76. .btn [am-Button] {} .btn-primary [am-Button~="primary"] {} .btn-large [am-Button~="large"] {} Outras Abordagens → AMCSS
  77. 77. ⓞ http://uilang.com
  78. 78. Uma linguagem própria para lidar com interface Outras Abordagens → uilang
  79. 79. <!doctype html> <title>Exemplo uilang</title> <script src=uilang.js></script> <style> /* Definição de estilos e transições */ #notification { transition: .8s } #notification.hidden { opacity: 0 } </style> <div id=notification> <p>Você tem três mensagens não lidas.</p> <button class=hide>Esconder</button> </div> <code> clicking on ".hide" adds class "hidden" on "#notification" </code> Outras Abordagens → uilang
  80. 80. ⓞ http://gridstylesheets.org
  81. 81. Utiliza o algoritmo Cassowary Constraint Solver para lidar com layouts Outras Abordagens → Grid Style Sheets
  82. 82. ~Cassowary Constraint Solver~ Outras Abordagens → Grid Style Sheets
  83. 83. p { color: purple; line-height: >= 16; line-height: <= ::window[height] / 12; } #product { $col-width: == ::[width] / 12 !require; $col-left: == ::[left] + ::[$col-width]; .price { left: == ::parent[$col-left]; width: == ::parent[$col-width]; } .description { left: == ::parent[$col-left] + ::parent[$col-width]; } } .sprite { z-index: >= #bg[z-index] >= 50; } Outras Abordagens → Grid Style Sheets
  84. 84. Depende de um runtime (que roda em um web worker) e de um pré-processador Outras Abordagens → Grid Style Sheets
  85. 85. ⓞ http://getbootstrap.com/css
  86. 86. Framework CSS à frente de seu tempo Outras Abordagens → Bootstrap
  87. 87. Ensinou e popularizou boas práticas de arquitetura CSS modular Outras Abordagens → Bootstrap
  88. 88. Conceito de helper classes Outras Abordagens → Bootstrap
  89. 89. <p class="text-muted"></p> <p class="text-primary"></p> <p class="text-success"></p> <p class="text-info"></p> <p class="text-warning"></p> <p class="text-danger"></p> Outras Abordagens → Bootstrap
  90. 90. Conceito de modificadores incrementais Outras Abordagens → Bootstrap
  91. 91. <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> Outras Abordagens → Bootstrap
  92. 92. Conceito de estados Outras Abordagens → Bootstrap
  93. 93. <button class="btn btn-primary btn-lg active">Primary button</button> <button class="btn btn-default btn-lg" disabled>Button</button> Outras Abordagens → Bootstrap
  94. 94. CSS na Magnetis
  95. 95. ⓞ https://github.com/magnetis/styleguide
  96. 96. Uma adaptação das partes que julgamos boas em algumas técnicas populares CSS na Magnetis
  97. 97. ›❯ Conceito de categorização do SMACSS; ›❯ Conceito de estados do SMACSS; ›❯ Conceito de elementos do BEM; ›❯ Conceito de modificadores do SUIT CSS. CSS na Magnetis
  98. 98. ›❯ Sass com a sintaxe SCSS; ›❯ Autoprefixer; ›❯ Sistema de grid Susy; ›❯ Breakpoint; ›❯ SVG; ›❯ Rails (partials & Sprockets = ❤); ›❯ Bower. CSS na Magnetis
  99. 99. /* Componente sidebar */ .accordion {} /* Componente sidebar no estado expandido */ .accordion.is-expanded {} /* Modificador `big` do componente botão */ .button--big {} /* Componente `menu` */ .menu {} /* Componente `menu-item` */ .menu-item {} /* Para definir estados, utilizamos `is`, `has`, `should` e `can` */ .menu-item.has-icon {} /* Elemento `icon` dentro do componente `menu` */ .menu-item__icon {} CSS na Magnetis
  100. 100. Pontos positivos
  101. 101. Todos no time conseguem falar a mesma língua Pontos positivos
  102. 102. Facilita o uso de ferramentas e a criação de um guia de estilo Pontos positivos
  103. 103. Desenvolvimento de interface baseado em componentes ❤ Pontos positivos
  104. 104. Resolve problemas de “depth of applicability” Pontos positivos profundidade de aplicabilidade
  105. 105. Evita depender de como o markup está estruturado na hora de criar estilos Pontos positivos
  106. 106. <style> navigation ul li a { color: #c0ffee; /* valores hexadecimais sempre em minúsculo, pfv */ } </style> <navigation> <ul> <li><a href="/meetup-css">Meetup CSS</a></li> <li><a href="/femug-sp">FEMUG-SP</a></li> </ul> </navigation> Pontos positivos
  107. 107. <style> .navigation-list-link { color: #coffee; } </style> <navigation> <ul> <li> <a class="navigation-list-link" href="/meetup-css">Meetup CSS</a> </li> <li> <a class="navigation-list-link" href=“/femug-sp">FEMUG-SP</a> </li> </ul> </navigation> Pontos positivos
  108. 108. A ideia de componentes pequenos e com pouca responsabilidade evita problemas de performance na renderização da página e também problemas com especificidade de seletores Pontos positivos
  109. 109. Navegadores começam a renderizar a página antes mesmo do documento estar completamente carregado, fazendo uma leitura da direita pra esquerda Pontos positivos
  110. 110. Evitar excesso de detalhes nos seletores é uma boa prática Pontos positivos
  111. 111. ul#menu > li { text-align: right; } Pontos positivos
  112. 112. Força uma análise contextual antes de programar Pontos positivos
  113. 113. Maior flexibilidade na hora de lidar com design responsivo Pontos positivos
  114. 114. Não existe bala de prata
  115. 115. Have a convention, document it, and stick to it. “ Não existe bala de prata
  116. 116. ⓞ http://www.shopify.com
  117. 117. <div class="nav__bar is-moved-by-drawer headroom headroom--verytop headroom--top"> <div class="nav nav--main" id="ShopifyMainNav"> <nav class="page-width"> <button type="button" class="icon nav__hamburger"> <span class="visuallyhidden">Mobile Navigation</span> </button> <div class="nav__logo-wrapper"> <a class="icon nav__logo--full-color" href="/"> <span class="visuallyhidden">Home</span> </a> </div> </nav> </div> </div> Não existe bala de prata
  118. 118. Não existe bala de prata
  119. 119. Não existe bala de prata
  120. 120. Pense no seu time na hora de tomar decisões de arquitetura Não existe bala de prata
  121. 121. Documente seu código! Não existe bala de prata
  122. 122. /* ================================================================= Grid layout ================================================================= */ /** * Column layout with horizontal scroll. * * This creates a single row of full-height, non-wrapping columns that can * be browsed horizontally within their parent. * * Example HTML: * * <div class="grid"> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * <div class="cell cell-3"></div> * </div> */ Não existe bala de prata
  123. 123. Coisas mudam. O tempo todo. Não existe bala de prata
  124. 124. Seu código precisa ser flexível e adaptável Não existe bala de prata
  125. 125. Foque em processos e resultados, não em ferramentas ou frameworks Não existe bala de prata
  126. 126. Muito obrigado @rafaelrinaldi

×