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

Componentes CSS: como desenvolver pensando em r...

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.

fernahh

May 21, 2016
Tweet

More Decks by fernahh

Other Decks in Programming

Transcript

  1. 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); } }
  2. 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); } }
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. body header main footer h1 a article p img p

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

    Todos os seletores de uma página fazem parte do mesmo escopo global.
  10. ITEM A ITEM B ITEM C Enviar /* body div

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

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

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

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

    /* .Dropdown__Button */ /* .Button */ GLOBAL
  15. Crescimento do tamanho das folhas de estilo nos últimos 4

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

    } li.foobar { color: red; font-weight: bold; font-size: 10px; }
  17. É sempre mais “fácil” jogar tudo no lixo e fazer

    de novo ou sobrescrever regras através da especificidade.
  18. Antes de aplicar qualquer metodologia de escrita ou usar outra

    tecnologia, primeiro precisamos entender princípios básicos de CSS.
  19. A ESPECIFICIDADE Especificidade de seletores - CSS inline: 1000 pontos;

    - ID: 100 pontos; - Classes, pseudo-elementos e atributos: 10 pontos; - Elementos: 1 ponto.
  20. EFEITO CASCATA Técnica utilizada para definir o estilo a um

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

    - Origem; - Especificidade; - Ordem da declaração.
  22. 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.
  23. /* * Todo o conteúdo textual do documento * terá

    16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
  24. 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.
  25. 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.
  26. .error { color: red; } .icon--error { @extend .error; }

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

    gerado pelo Sass. */ .other__context .error, .other__context .icon--error { color: #cc0000; }
  28. 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.
  29. “Não concordei com o que você falou sobre @extend, você

    pode usar ele com %placeholder.” @diogomoretti_
  30. .error, %error { color: red; } .icon--error { @extend %error;

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

    color: red; } .other__context .error { color: #cc0000; }
  32. 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.
  33. /* * Resultado gerado pelo Sass. */ .icon--error { color:

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

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

    red; } .icon--critical_error { color: #cc0000; }
  36. 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.
  37. .button { display: inline-block; padding: 10px; color: black; background-color: white;

    } .button--sucess { color: white; background-color: green; }
  38. A melhor forma de resolver problemas com CSS é dividir

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

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

    CSS é diferente dos componentes JavaSscript.
  41. 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.
  42. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl

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

    + ')', WebkitTransition: 'all', msTransition: 'all' }; ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
  44. 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.
  45. - 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
  46. CSS Modules nada mais é que um arquivo de CSS

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

    ... } .success { ... } components/button.css
  48. /* Vanilla CSS*/ innerHTML = `<button class="Button Button--in- progress">` /*

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

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

    red; } /* button.css */ .button { ... } .error { composes: button; composes: errorColor from "/componentes/colors.css"; }
  51. 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.
  52. - Depende de tarefas de build; CSS Modules bad parts

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

    soluções baseadas em JavaScript.
  54. 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.
  55. Vanilla CSS good parts - A curva de aprendizado é

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

    - É custoso de manter e fácil de ser violado; Vanilla CSS bad parts
  57. :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); ... }
  58. :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; } }
  59. @apply A projeto ainda é um rascunho de proposta, porém,

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

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

    Aprenda bem Vanilla CSS; - Fique de olho na comunidade React; Conclusões
  62. 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.
  63. Sempre ouça o que a comunidade tem pra oferecer, afinal,

    somos nós que fazemos o futuro da web.