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.

Transcript

2. $about_me: ( name: "Luiz Fernando Rodrigues", twitter: "@fernahh", github: "@fernahh", email: "fernahh@gmail.com", blog: "blog.fernahh.com.br", );
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
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; }
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,
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
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; }
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; }
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; }
52. .button { display: inline-block; padding: 10px; color: black; background-color: white; } .button--sucess { color: white; background-color: green; }
57. <button class="button button__anchor_icon">Abrir</button> bloco elemento
58. <button class="button button--state-danger">Fechar</button> bloco modificador
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;
66. <style> #button {color: blue;} </style> <h1 id="button"></h1> var foo = document.querySelector('#button').createShadowRoot(); foo.innerHTML = 'Abrir';
74. this.setState();
76. camelCase
77. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World! </div>, mountNode);
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