Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Componentes CSS: como desenvolver pensando em reuso (v1.5)

Componentes CSS: como desenvolver pensando em reuso (v1.5)

Um dos principais pilares para a web emplacar como uma plataforma para se construir aplicações robustas foi o CSS. Porém, cada vez mais precisamos de aplicações dinâmicas e modularizadas. E como criar componentes encapsulados em uma linguagem onde tudo é global? Nessa talk iremos ver paradigmas e aprender como desenvolver CSS escalável em tempos de módulos JavaScript, HTTP/2 e Web Components.

188900fc4ed166ff159a9b74aa38a9bd?s=128

fernahh

May 21, 2016
Tweet

Transcript

  1. COMPONENTES CSS fernahh.com.br Como desenvolver pensando em reuso.

  2. @fernahh fernahh.com.br

  3. contaazul.com

  4. #!/bin/bash STRING="Hello World" echo $STRING

  5. import javax.swing.JFrame; import javax.swing.JLabel; public class HelloWorldSwing { public static

    void main(String[] args) { JFrame frame = new JFrame("HelloWorldSwing"); final JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } }
  6. import javax.swing.JFrame; import javax.swing.JLabel; public class HelloWorldSwing { public static

    void main(String[] args) { JFrame frame = new JFrame("HelloWorldSwing"); final JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } }
  7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <h1>Hello

    World!</h1> </body> </html>
  8. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <h1>Hello

    World!</h1> </body> </html>
  9. None
  10. As principais empresas de software do mundo, hoje, tem seus

    principais produtos na web.
  11. As principais empresas de software do mundo, hoje, tem seus

    principais produtos na web.
  12. None
  13. O Bootstrap é o mais bem sucedido framework de CSS.

    Inúmeras aplicações web são baseadas nele. Se você é front-end developer, lide com isso.
  14. None
  15. None
  16. None
  17. Alguns problemas sérios com CSS...

  18. 1 Qualquer seletor é global.

  19. Até o w3fools, digo, w3schools, sabe que variáveis globais são

    ruins. http://www.w3fools.com/
  20. body header main footer h1 a article p img p

    Quando pensamos no DOM, a primeira representação que nos vem a cabeça é de uma árvore.
  21. body header main footer h1 a article p img p

    Quando pensamos no DOM, a primeira representação que nos vem a cabeça é de uma árvore.
  22. body header main footer h1 a article p img p

    Quando pensamos no DOM, a primeira representação que nos vem a cabeça é de uma árvore.
  23. body header main footer h1 a article p img p

    Quando pensamos no DOM, a primeira representação que nos vem a cabeça é de uma árvore.
  24. body header main footer h1 a article p img p

    Todos os seletores de uma página fazem parte do mesmo escopo global.
  25. body header main footer h1 a article p img p

    Todos os seletores de uma página fazem parte do mesmo escopo global.
  26. Enviar /* .Button */

  27. ITEM A ITEM B ITEM C /* .Dropdown */

  28. ITEM A ITEM B ITEM C Enviar

  29. ITEM A ITEM B ITEM C Enviar

  30. ITEM A ITEM B ITEM C Enviar

  31. ITEM A ITEM B ITEM C ENVIAR

  32. ITEM A ITEM B ITEM C Enviar /* .Dropdown .Button

    */
  33. ITEM A ITEM B ITEM C Enviar /* .nav .Dropdown

    .Button */
  34. ITEM A ITEM B ITEM C Enviar /* .Header .Nav

    .Dropdown .Button */
  35. ITEM A ITEM B ITEM C Enviar /* body div

    .TuaTia > #Container. Header .Nav .Dropdown .Button */
  36. ITEM A ITEM B ITEM C Enviar /* body div

    .TuaTia > .TuaMae > #Container.Header .Nav .Dropdown . Button */
  37. ITEM A ITEM B ITEM C Enviar /* body div

    .TuaTia > .TuaMae > . TuaPai #Container.Header .Nav . Dropdown .Button */
  38. ITEM A ITEM B ITEM C Enviar /* .Dropdown__Button */

  39. /* .Dropdown */ ITEM A ITEM B ITEM C Enviar

    /* .Dropdown__Button */ /* .Button */
  40. /* .Dropdown */ ITEM A ITEM B ITEM C Enviar

    /* .Dropdown__Button */ /* .Button */ GLOBAL
  41. None
  42. BUG 4.096

  43. BUG 4.096 Internet Explorer 9 e inferiores aceitam somente 4.096

    seletores.
  44. 5498 seletores http://cssstats.com

  45. 5498 seletores 2371 seletores http://cssstats.com

  46. 5498 seletores 2371 seletores 9632 seletores http://cssstats.com

  47. 2 É difícil (quase impossível) refatorar.

  48. Crescimento do tamanho das folhas de estilo nos últimos 4

    anos: 10 35 80 2010 2013 2015 http://httparchive.org/
  49. table.foo { color: red; } table.foo td.bar { color: red;

    } li.foobar { color: red; font-weight: bold; font-size: 10px; }
  50. .foo { color: red; } .bar { color: red; }

    .foobar { color: red; }
  51. É sempre mais “fácil” jogar tudo no lixo e fazer

    de novo ou sobrescrever regras através da especificidade.
  52. 3 É custoso lidar com estados.

  53. https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/

  54. Antes de aplicar qualquer metodologia de escrita ou usar outra

    tecnologia, primeiro precisamos entender princípios básicos de CSS.
  55. PRINCÍPIOS BÁSICOS DE CSS

  56. PRINCÍPIOS BÁSICOS DE CSS Especificidade

  57. PRINCÍPIOS BÁSICOS DE CSS Especificidade Efeito Cascata

  58. PRINCÍPIOS BÁSICOS DE CSS Especificidade Efeito Cascata Herança

  59. A ESPECIFICIDADE CSS

  60. A ESPECIFICIDADE CSS 2 3 1

  61. A ESPECIFICIDADE CSS 2 3 1 !IMPORTANT

  62. A ESPECIFICIDADE Especificidade de seletores - CSS inline: 1000 pontos;

    - ID: 100 pontos; - Classes, pseudo-elementos e atributos: 10 pontos; - Elementos: 1 ponto.
  63. Sempre que você usa !important, você quebra a especificidade.

  64. EFEITO CASCATA Técnica utilizada para definir o estilo a um

    seletor mesmo em caso de conflitos. O coração do CSS
  65. EFEITO CASCATA Definindo o peso de uma regra - Importância;

    - Origem; - Especificidade; - Ordem da declaração.
  66. HERANÇA Herença? OO? Assim como você herda métodos e atributos

    de objetos, no CSS você herda as regras de um elemento pai.
  67. /* * Todo o conteúdo textual do documento * terá

    16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
  68. HERANÇA height, width, margin, padding Propriedades que se referem ao

    box-model não aceitam herança, porém podemos forçar com o valor inherit.
  69. Super poderes para o CSS Pré-processadores deram super poderes para

    desenvolvedores escreverem CSS. Em nosso contexto, @extend e mixins nos trazem benefícios, mas que devem ser usados com bastante cautela.
  70. @extend Permite estender placeholders e classes, porém, muitos autores desencorajam

    a usar esse recurso.
  71. .error { color: red; } .icon--error { @extend .error; }

  72. .error { color: red; } .icon--error { @extend .error; }

    /* * Resultado gerado pelo Sass. */ .error, .icon--error { color: red; }
  73. .other__context .error { color: darken(red, 10%); }

  74. .other__context .error { color: darken(red, 10%); } /* * Resultado

    gerado pelo Sass. */ .other__context .error, .other__context .icon--error { color: #cc0000; }
  75. Isso é péssimo! Além de tirar o controle do desenvolvedor,

    o Sass irá gerar código desnecessário e prejudicar outras áreas de uma interface.
  76. “Não concordei com o que você falou sobre @extend, você

    pode usar ele com %placeholder.” @diogomoretti_
  77. diogomoretti.github.io/grider

  78. .error, %error { color: red; } .icon--error { @extend %error;

    } .other__context .error { color: darken(red, 10%); }
  79. /* * Resultado gerado pelo Sass. */ .error, .icon--error {

    color: red; } .other__context .error { color: #cc0000; }
  80. Resumindo sobre @extend Nunca use @extend com classes. Se você

    quiser usar, vá de placeholders.
  81. Mixins Mixins são eficientes pois eles injetam códigos somente onde

    eles foram usados, além de serem muito úteis quando precisamos de parâmetros.
  82. @mixin error { color: red; } .icon--error { @include error;

    } .label--error { @include error; }
  83. /* * Resultado gerado pelo Sass. */ .icon--error { color:

    red; } .icon--error { color: red; }
  84. @mixin error($critical: false) { @if $critical { color: darken(red, 10%);

    } @else { color: red; } } .icon--error { @include error; } .icon--critical_error { @include error($critical: true); }
  85. /* * Resultado gerado pelo Sass. */ .icon--error { color:

    red; } .icon--critical_error { color: #cc0000; }
  86. Concatenação de classes O uso de composição/concatenação de classes é

    muito usado em frameworks de CSS. O popular Bootstrap faz bastante uso dessa abordagem.
  87. .button { display: inline-block; padding: 10px; color: black; background-color: white;

    } .button--sucess { color: white; background-color: green; }
  88. Revisando: Problemas comuns com CSS

  89. Revisando: Problemas comuns com CSS Especificidade

  90. Revisando: Problemas comuns com CSS Especificidade Efeito Cascata

  91. Revisando: Problemas comuns com CSS Especificidade Efeito Cascata Herança

  92. A melhor forma de resolver problemas com CSS é dividir

    para conquistar, ou seja: Criar componentes!
  93. Componentes devem ser auto-suficientes, capazes de encapsular funcionalidades, permitir uma

    API de acesso. Componente
  94. Componentes devem ser auto-suficientes, capazes de encapsular funcionalidades, permitir uma

    API de acesso. Componente RequiredInterface
  95. Componentes devem ser auto-suficientes, capazes de encapsular funcionalidades, permitir uma

    API de acesso. Componente ProvidedInterface ProvidedInterface RequiredInterface
  96. Componentes JS X Componentes CSS Lembre-se: o conceito de componentes

    CSS é diferente dos componentes JavaSscript.
  97. React é uma das melhores (quiça a melhor) bibliotecas que

    lidam com estado de componentes.
  98. VirtualDOM Trata-se de uma árvore JavaScript composta por componentes e

    elementos React.
  99. VirtualDOM

  100. VirtualDOM

  101. VirtualDOM this.setState();

  102. VirtualDOM

  103. React Components > Inline Styles Inline Styles é uma forma

    de especificar estilos para um componente através de um objeto, onde a chave é a representação de uma regra em camelCase e seu valor é o valor do estilo.
  104. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl

    + ')', WebkitTransition: 'all', msTransition: 'all' };
  105. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl

    + ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
  106. Inline Styles good parts - É uma forma de isolar

    regras (no global scope); - Mais facilidade pra lidar com estados; - Faz todo sentido quando lidamos com visualização de dados.
  107. - Não é cacheável; - Depende 100% de JavaScript; -

    Difícil de ter controle em relação a cascata e herança. Inline Styles bad parts
  108. CSS Modules nada mais é que um arquivo de CSS

    com escopo local. https://github.com/css-modules/css-modules
  109. .normal { ... } .disable { ... } .error {

    ... } .success { ... } components/button.css
  110. import styles from './components/button.css'; buttonElem.outerHTML = `<button class=$(styles.normal>Enviar</button>`; components/button.js

  111. <button class="components_button__normal__abc5436"> Enviar </button> Output:

  112. /* Vanilla CSS*/ innerHTML = `<button class="Button Button--in- progress">` /*

    CSS Modules */ innerHTML = `<button class="${styles.inProgress}" >` CSS Modules > Estados
  113. CSS Modules > Composição .button { ... } .normal {

    composes: button; } .disable { composes: button; } .error { composes: button; } .success { composes: button; }
  114. CSS Modules > Dependências /* colors.css */ .errorColor { color:

    red; } /* button.css */ .button { ... } .error { composes: button; composes: errorColor from "/componentes/colors.css"; }
  115. “Se você pudesse resumir CSS Modules em uma frase, qual

    seria?”
  116. None
  117. 1º GET /index.html CSS Modules > Dependências > HTTP2 Server

    Push
  118. 1º GET /index.html index.html CSS Modules > Dependências > HTTP2

    Server Push
  119. 1º GET /index.html index.html CSS Modules > Dependências > HTTP2

    Server Push
  120. 1º GET /index.html colors.css button.css index.html CSS Modules > Dependências

    > HTTP2 Server Push
  121. CSS Modules good parts - É possível lidar com escopo

    local; - Fácil de lidar com estados; - Possui uma API de importação e exportação de regras; - Possui integração com Módulos JavaScript <3.
  122. - Depende de tarefas de build; CSS Modules bad parts

    - É uma tecnologia nova e com futuro incerto.
  123. Um dica: use mais recursos nativos do browser do que

    soluções baseadas em JavaScript.
  124. Vanilla Components CSS > BEM

  125. <button class="button button__anchor_icon">Abrir</button>

  126. <button class="button button__anchor_icon">Abrir</button> bloco

  127. <button class="button button__anchor_icon">Abrir</button> bloco elemento

  128. <button class="button button--state-danger">Fechar</button> bloco

  129. <button class="button button--state-danger">Fechar</button> bloco modificador

  130. Vanilla Components CSS > SMACSS

  131. Vanilla Components CSS > SMACSS Foi criado para resolver os

    problemas do Yahoo Mail. É dividido em base, layout, module, state. Não é apenas um sistema de escrita, é uma metodologia.
  132. <section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo

  133. <section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo módulo

    com estado
  134. <section class="comment-box"> <div class="comment-box is-open">...</div> <button class="button-black">Comentar</button> </section> módulo módulo

    com estado tema
  135. Vanilla CSS good parts - A curva de aprendizado é

    fácil; - Dependência zero de outas ferramentas; - Já usado e validado por grandes produtos.
  136. - Não resolve o problema com escopo global de seletores.

    - É custoso de manter e fácil de ser violado; Vanilla CSS bad parts
  137. OH: se pós-processarmos nosso CSS, podemos usar features do futuro!

  138. PostCSS

  139. PostCSS

  140. http://caniuse.com/#feat=css-variables

  141. :root { --main-color: #ffffff; } @media (min-width: 30em) { :root

    { --main-color: #333333; } } body { background-color: #000000; color: var(--main-color); } .Button { color: $main-color; border: 4px solid var(--main-color); ... }
  142. :root { --main-color: #ffffff; } @media (min-width: 30em) { :root

    { --main-color: #333333; } } body { background-color: #000000; color: var(--main-color); } .Button { color: $main-color; border: 4px solid var(--main-color); ... } body { background-color: #000000; color: #ffffff; } @media (min-width: 30em) { body { color: #333333; } } .Button { color: #ffffff; border: 4px solid #ffffff; ... } @media (min-width: 30em) { .Button { color: #333333; border: 4px solid #333333; } }
  143. CSS Variables >>>> abismo >>>> Variáveis do Sass

  144. :root { --clearfix: { display: table; clear: both; content: '';

    } }
  145. :root { --clearfix: { display: table; clear: both; content: '';

    } } div { @apply --clearfix; }
  146. @apply A projeto ainda é um rascunho de proposta, porém,

    já está implementado no Google Chrome. https://tabatkins.github.io/specs/css-apply-rule/
  147. - Escolha a melhor abordagem para o seu produto; Conclusões

  148. - Escolha a melhor abordagem para o seu produto; -

    Aprenda bem Vanilla CSS; Conclusões
  149. - Escolha a melhor abordagem para o seu produto; -

    Aprenda bem Vanilla CSS; - Fique de olho na comunidade React; Conclusões
  150. Lembre-se: antes de adotar uma nova tecnologia em um produto,

    pense como será o futuro de sua aplicação quando essa tecnologia for defasada.
  151. Sempre ouça o que a comunidade tem pra oferecer, afinal,

    somos nós que fazemos o futuro da web.
  152. Obrigado! @fernahh