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

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!
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
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