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

Componentes CSS: como desenvolver pensando em r...

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.

fernahh

December 05, 2015
Tweet

More Decks by fernahh

Other Decks in Programming

Transcript

  1. table.foo { color: red; } table.foo td.bar { color: red;

    } li.foobar { color: red; font-weight: bold; font-size: 10px; }
  2. /* * Todo o conteúdo textual do documento * terá

    16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
  3. .error { color: red; } .icon--error { @extend .error; }

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

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

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

    color: red; } .other__context .error { color: #cc0000; }
  7. /* * Resultado gerado pelo Sass. */ .icon--error { color:

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

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

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

    } .button--sucess { color: white; background-color: green; }
  11. - A curva de aprendizado é extremamente mais fácil; -

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

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

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

    document.querySelector('#button').createShadowRoot(); foo.innerHTML = 'Abrir';
  15. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl

    + ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World! </div>, mountNode);
  16. /* Vanilla CSS*/ innerHTML = `<button class="Button Button--in- progress">` /*

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

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

    */ .button { ... } .error { composes: button; composes: errorColor from "/componentes/colors.css"; }