Arquitetura CSS

Ffc5102ee85d0d7ec57200fa3e6b1fce?s=47 Rafael Rinaldi
December 05, 2014

Arquitetura CSS

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.

--

Video
https://www.eventials.com/locaweb/arquitetura-css-com-rafael-rinaldi/?playlist=4o-seminario-locaweb-desenvolvimento-sao-paulo

Anotações sobre a palestra no blog do Tableless
http://tableless.com.br/arquitetura-css-anotacoes-da-palestra-rafael-rinaldi

Ffc5102ee85d0d7ec57200fa3e6b1fce?s=128

Rafael Rinaldi

December 05, 2014
Tweet

Transcript

  1. ARQUITETURA CSS @rafaelrinaldi

  2. @rafaelrinaldi

  3. https://magnetis.com.br ⡗

  4. https://magnetis.com.br ⡗ Estamos contratando!

  5. https://sp.femug.com ⡗ FEMUG

  6. Disclaimer

  7. peter_griffin_css.gif Não vou utilizar o gif to Peter Griffin durante

    a palestra!
  8. Desenvolver interfaces para a web é muito mais do que

    um problema exclusivo do CSS
  9. Culpa do CSS vs. nossa culpa

  10. Culpa do CSS

  11. ›❯ Não é muito expressivo; ›❯ Ordem de definição de

    dependências; ›❯ Especificidade; ›❯ Cheio de truques.
  12. Nossa culpa

  13. ›❯ Falta de conhecimento sobre o proprio projeto; ›❯ Caos

    na estrutura; ›❯ Documentação inexistente ou muito ruim; ›❯ Não analisar o que já existe antes de criar algo do zero.
  14. Conteúdo Apresentação (e agora também animações) Comportamento e interações mais

    complexas http://alistapart.com/article/understandingprogressiveenhancement ⡗
  15. Desenvolver interfaces é um trabalho complexo

  16. CSS funciona. Poderia ser muito pior!

  17. None
  18. Técnicas

  19. Técnicas Frameworks / Bibliotecas ≠

  20. OOCSS https://github.com/stubbornella/oocss/wiki ⡗

  21. https://github.com/stubbornella/oocss/wiki ⡗ Object Oriented CSS

  22. Influenciado pelo paradigma da orientação a objetos Técnicas → OOCSS

  23. CSS “object” Técnicas → OOCSS

  24. Padrão visual que se repete e que pode ser abstraído

    em um contexto próprio Técnicas → OOCSS
  25. Separar estrutura de marcação de variações visuais Técnicas → OOCSS

  26. Separar o conteúdo seu contexto Técnicas → OOCSS

  27. SMACSS http://smacss.com ⡗

  28. Scalable and Modular Architecture for CSS http://smacss.com ⡗

  29. Feito para resolver problemas específicos do Yahoo! Mail Técnicas →

    SMACSS
  30. ›❯ Base; ›❯ Layout; ›❯ Module; ›❯ State; ›❯ Theme.

    Técnicas → SMACSS
  31. SMACSS → Base Técnicas → SMACSS → Base

  32. Regras padrão de estilo Técnicas → SMACSS → Base

  33. html { box-sizing: border-box; } *, *::before, *::after { box-sizing:

    inherit; } body { background: #bada55; } input[type=text] { border: 2px solid #444; } Técnicas → SMACSS → Base
  34. SMACSS → Layout Técnicas → SMACSS → Layout

  35. ›❯ 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
  36. #header { font-size: 2em; color: fuchsia; width: 100%; height: 15em;

    /* Dica: não precisa especificar unidade p/ line height */ line-height: 1.5; } #sidebar { font-size: .75em; color: gray; float: right; } .l-inverse #sidebar { float: left; } Técnicas → SMACSS → Layout
  37. SMACSS → Modules Técnicas → SMACSS → Modules

  38. ›❯ Trechos de código reutilizáveis; ›❯ Partes modulares do design;

    ›❯ Padrões. Técnicas → SMACSS → Modules
  39. SMACSS → State Técnicas → SMACSS → State

  40. ›❯ Como os módulos irão se apresentar em estados específicos;

    ›❯ Representado por classes com o prefixo is . Técnicas → SMACSS → State
  41. .sidebar.is-expanded { opacity: 1; } .button.is-disabled { cursor: not-allowed; background:

    lightgray; opacity: .75; pointer-events: none; /* Capeta */ } Técnicas → SMACSS → State
  42. SMACSS → Theme Técnicas → SMACSS → Theme

  43. Utilizado para abstrair propriedades visuais Técnicas → SMACSS → Theme

  44. /* 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
  45. BEM http://bem.info ⡗

  46. Block Element Modifier http://bem.info ⡗

  47. Feito para resolver problemas específicos do Yandex Técnicas → BEM

  48. ›❯ 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
  49. BEM → Block Técnicas → BEM → Block

  50. Entidade independente que é capaz de conter outros blocos Técnicas

    → BEM → Block
  51. Técnicas → BEM → Block

  52. Técnicas → BEM → Block

  53. BEM → Element Técnicas → BEM → Element

  54. ›❯ Parte de um bloco com uma função específica; ›❯

    Não possui um contexto próprio. Técnicas → BEM → Element
  55. Técnicas → BEM → Element

  56. Técnicas → BEM → Element

  57. BEM → Modifier Técnicas → BEM → Modifier

  58. Uma propriedade de um bloco ou elemento que altera seu

    comportamento Técnicas → BEM → Modifier
  59. Técnicas → BEM → Modifier

  60. Técnicas → BEM → Modifier

  61. BEM → Nomenclatura Técnicas → BEM → Nomenclatura

  62. ›❯ 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
  63. <ul class="list list_size_big list_type_links"> <li class=“list__item”> <a href=“/seminario-locaweb”>Seminário Locaweb</a> </li>

    <li class="list__item list__item_state_active”> <a href=“/femug-sp">FEMUG-SP</a> </li> </ul> Técnicas → BEM → Nomenclatura
  64. SUIT CSS https://suitcss.github.io ⡗

  65. Criado por desenvolvedores do Twitter numa tentativa de focar numa

    arquitetura baseada em componentes Técnicas → SUIT CSS
  66. SUIT CSS → Nomenclatura Técnicas → SUIT CSS → Nomenclatura

  67. ›❯ Utiliza-se camelCase para separar palavras em nomes longos; ›❯

    Utilitários devem começar com o prefixo u . Técnicas → SUIT CSS → Nomenclatura
  68. /* 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
  69. <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
  70. /* Inline de imports procura por libs instaladas via NPM

    */ @import "normalize.css"; /* Atalhos para lidar com media queries */ @custom-media --wide-screen (min-width: 80em); /* Valores padrão */ :root { --base-font-size: 16px; } @media (--wide-screen) { html { /* Utiliza Autoprefixer p/ lidar c/ vendor prefixes */ font-size: calc(var(--base-font-size) * 2); } } Técnicas → SUIT CSS → Nomenclatura
  71. https://github.com/suitcss/components ⡗

  72. itcss http://itcss.io ⡗

  73. inverted triangle css http://itcss.io ⡗

  74. Abordagem que visa escrever CSS baseado na ordem de especificidade

    Técnicas → itcss
  75. Abordagem que visa escrever CSS baseado na ordem de especificidade

    Técnicas → itcss
  76. Técnicas → itcss Especificidade baixa Especificidade alta

  77. Técnicas → itcss Settings Tools Generic Base Objects Trumps Components

  78. ›❯ Settings: variáveis e configurações; ›❯ Tools: mixins e funções;

    ›❯ Generic: resets, configuração de box sizing, etc; ›❯ Base: estilos atrelados a tags, sem o uso de classes; ›❯ Objects: padrões visuais que se repetem; ›❯ Components: elementos de interface com contexto específico; ›❯ Trumps: overrides (geralmente utiliza-se !important ). Técnicas → itcss
  79. ›❯ Evita redundância na descrição de regras de estilo; ›❯

    Elimina problemas com especificidade; ›❯ Estrutura granular; ›❯ Elimina a necessidade de “escrever CSS para remover CSS”. Técnicas → itcss
  80. Outras abordagens

  81. None
  82. http://www.csstyle.io ⡗

  83. Utiliza mixins de Sass para definir estilos Outras Abordagens →

    csstyle
  84. Outras Abordagens → csstyle <a class="button --action +rounded +glass"> Cadastre-se

    <span class="button__icon --rocket"></span> </a>
  85. Outras Abordagens → csstyle <a class="button --action +rounded +glass"> Cadastre-se

    <span class="button__icon --rocket"></span> </a> Component
  86. Outras Abordagens → csstyle <a class="button --action +rounded +glass"> Cadastre-se

    <span class="button__icon --rocket"></span> </a> Option Option
  87. Outras Abordagens → csstyle <a class="button --action +rounded +glass"> Cadastre-se

    <span class="button__icon --rocket"></span> </a> Tweaks
  88. Outras Abordagens → csstyle <a class="button --action +rounded +glass"> Cadastre-se

    <span class="button__icon --rocket"></span> </a> Parts
  89. Outras Abordagens → csstyle @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; } }
  90. https://amcss.github.io ⡗

  91. Utiliza atributos HTML para definir estilos Outras Abordagens → AMCSS

  92. Outras Abordagens → AMCSS <!-- Botão padrão --> <a am-Button>Inscrever-se

    no Seminário Locaweb</a> <!-- Variações do botão --> <a am-Button="primary large”>Informações</a> <a am-Button="info small”>Cancelar inscrição</a>
  93. A mágica está no seletor ~= que nos permite selecionar

    qualquer atributo que contenha uma lista de regras separadas por espaço Outras Abordagens → AMCSS
  94. Outras Abordagens → AMCSS .btn [am-Button] {} .btn-primary [am-Button~="primary"] {}

    .btn-large [am-Button~="large"] {}
  95. http://uilang.com ⡗

  96. Uma linguagem própria para lidar com interface Outras Abordagens →

    uilang
  97. <!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
  98. http://gridstylesheets.org ⡗

  99. Utiliza o algoritmo Cassowary Constraint Solver para lidar com layouts

    Outras Abordagens → Grid Style Sheets
  100. Outras Abordagens → Grid Style Sheets ~Cassowary Constraint Solver~

  101. 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
  102. Depende de um runtime (que roda em um web worker)

    e de um pré-processador Outras Abordagens → Grid Style Sheets
  103. http://getbootstrap.com/css ⡗

  104. Framework CSS à frente de seu tempo Outras Abordagens →

    Bootstrap
  105. Ensinou e popularizou boas práticas de arquitetura CSS modular Outras

    Abordagens → Bootstrap
  106. Conceito de modificadores incrementais Outras Abordagens → Bootstrap

  107. Conceito de estados Outras Abordagens → Bootstrap

  108. CSS na Magnetis

  109. https://github.com/magnetis/styleguide ⡗

  110. Uma adaptação das partes que julgamos boas em algumas técnicas

    populares CSS na Magnetis
  111. CSS na Magnetis

  112. CSS na Magnetis ›❯ Conceito de categorização do SMACSS; ›❯

    Conceito de estados do SMACSS; ›❯ Conceito de elementos do BEM; ›❯ Conceito de modificadores do SUIT CSS.
  113. CSS na Magnetis ›❯ Sass com a sintaxe SCSS; ›❯

    Autoprefixer; ›❯ Sistema de grid Susy; ›❯ Breakpoint; ›❯ SVG; ›❯ Rails (partials & Sprockets = ❤); ›❯ Bower.
  114. /* 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` */ .menu-item.has-icon {} /* Elemento `icon` dentro do componente `menu` */ .menu-item__icon {} CSS na Magnetis
  115. app ├── assets │ └── stylesheets │ ├── application.scss │

    ├── base │ │ ├── _breakpoints.scss │ │ ├── _defaults.scss │ │ ├── _grid.scss │ │ ├── _typography.scss │ │ └── _variables.scss │ ├── components │ │ ├── _button.scss │ │ ├── _dropdown.scss │ │ ├── _gallery.scss │ │ └── _link.scss │ ├── helpers │ │ ├── _classes.scss │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ └── _placeholders.scss │ └── layout │ ├── _footer.scss │ ├── _header.scss │ └── sections │ ├── _dashboard.scss │ └── _homepage.scss ├── bower.json └── vendor └── assets └── bower ├── normalize-css └── susy
  116. //= require 'normalize-css' @import // Estilos e configurações base 'base/variables',

    'base/grid', 'base/breakpoints', 'base/typography', 'base/deafults', // Utilitários 'helpers/*', // Componentes 'components/*', // Arquivos de layout 'layout/**/*'; CSS na Magnetis
  117. Pontos positivos

  118. Todos no time conseguem falar a mesma língua Pontos positivos

  119. Facilita o uso de ferramentas e a criação de um

    guia de estilo Pontos positivos
  120. Desenvolvimento de interface baseado em componentes ❤ Pontos positivos

  121. Evita depender de como o markup está estruturado na hora

    de criar estilos Pontos positivos
  122. <style> navigation ul li a { /* Valores hexadecimais sempre

    em minúsculo, por favor */ color: #c0ffee; } </style> <navigation> <ul> <li><a href="/seminario">Seminário Locaweb</a></li> <li><a href="/femug-sp">FEMUG-SP</a></li> </ul> </navigation> Pontos positivos
  123. <style> .link { color: #coffee; } </style> <navigation> <ul> <li>

    <a class="link" href=“/seminario">Seminário Locaweb</a> </li> <li> <a class="link" href="/femug-sp">FEMUG-SP</a> </li> </ul> </navigation> Pontos positivos
  124. Força uma análise contextual da interface Pontos positivos

  125. Maior flexibilidade na hora de lidar com design responsivo Pontos

    positivos
  126. Não existe bala de prata

  127. Have a convention, document it, and stick to it. Não

    existe bala de prata “
  128. http://www.shopify.com ⡗

  129. <div class="nav__bar is-moved-by-drawer headroom 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
  130. Não existe bala de prata

  131. Não existe bala de prata

  132. Onde está seu Deus agora? Não existe bala de prata

  133. Pense no seu time na hora de tomar decisões de

    arquitetura Não existe bala de prata
  134. Documente seu código! Não existe bala de prata

  135. /* ============================================================== 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
  136. Coisas mudam o tempo todo Não existe bala de prata

  137. Não existe bala de prata

  138. Seu código precisa ser flexível e adaptável Não existe bala

    de prata
  139. Foque em processos e resultados, não em ferramentas ou frameworks

    Não existe bala de prata
  140. @rafaelrinaldi Muito obrigado