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

Componentes CSS: como desenvolver pensando em reuso

188900fc4ed166ff159a9b74aa38a9bd?s=47 fernahh
December 05, 2015

Componentes CSS: como desenvolver pensando em reuso

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

December 05, 2015
Tweet

Transcript

  1. None
  2. $about_me: ( name: "Luiz Fernando Rodrigues", twitter: "@fernahh", github: "@fernahh",

    email: "fernahh@gmail.com", blog: "blog.fernahh.com.br", );
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. body header main footer h1 a article p img p

  13. body header main footer h1 a article p img p

  14. body header main footer h1 a article p img p

  15. body header main footer h1 a article p img p

  16. None
  17. None
  18. table.foo { color: red; } table.foo td.bar { color: red;

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

    .foobar { color: red; }
  20. None
  21. None
  22. None
  23. None
  24. PRINCÍPIOS BÁSICOS DE CSS

  25. A ESPECIFICIDADE CSS

  26. A ESPECIFICIDADE CSS 2 3 1

  27. A ESPECIFICIDADE CSS 2 3 1 !IMPORTANT

  28. A ESPECIFICIDADE

  29. !important,

  30. None
  31. EFEITO CASCATA

  32. EFEITO CASCATA

  33. HERANÇA

  34. /* * Todo o conteúdo textual do documento * terá

    16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
  35. HERANÇA

  36. None
  37. None
  38. .error { color: red; } .icon--error { @extend .error; }

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

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

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

    gerado pelo Sass. */ .other_context .error, .other_context .icon-error { color: #cc0000; }
  42. None
  43. .error, %error { color: red; } .icon--error { @extend .error;

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

    color: red; } .other__context .error { color: #cc0000; }
  45. None
  46. None
  47. @mixin error { color: red; } .icon--error { @include error;

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

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

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

    red; } .icon--critical_error { color: #cc0000; }
  51. None
  52. .button { display: inline-block; padding: 10px; color: black; background-color: white;

    } .button--sucess { color: white; background-color: green; }
  53. None
  54. None
  55. None
  56. None
  57. <button class="button button__anchor_icon">Abrir</button> bloco elemento

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

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

    com estado tema
  62. - A curva de aprendizado é extremamente mais fácil; -

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

    custoso de manter e fácil de ser violado;
  64. - Não resolve o problema com - É custoso de

    manter e fácil de ser violado;
  65. None
  66. <style> #button {color: blue;} </style> <h1 id="button"></h1> var foo =

    document.querySelector('#button').createShadowRoot(); foo.innerHTML = 'Abrir';
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. this.setState();

  75. None
  76. camelCase

  77. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl

    + ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World! </div>, mountNode);
  78. None
  79. None
  80. None
  81. None
  82. .normal { ... } .disable { ... } .error {

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

  84. <button class="components_button__normal__abc5436"> Enviar </button>

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

    CSS Modules */ innerHTML = `<button class="${styles.inProgress}">`
  86. .button { ... } .normal { composes: button; } .disable

    { composes: button; } .error { composes: button; } .success { composes: button; }
  87. /* colors.css */ .errorColor { color: red; } /* button.css

    */ .button { ... } .error { composes: button; composes: errorColor from "/componentes/colors.css"; }
  88. 1º GET /index.html colors.css button.css index.html

  89. None
  90. None
  91. None
  92. None
  93. None