Save 37% off PRO during our Black Friday Sale! »

CSS: Computer Style Science

188900fc4ed166ff159a9b74aa38a9bd?s=47 fernahh
November 27, 2016

CSS: Computer Style Science

Entre o surgimento da primeira linguagem de programação e o CSS existem quase quatro décadas de diferença. Nesse tempo surgiram diversos conceitos, como a programação funcional, imperativa e orientada a objetos.

Nessa palestra mostro como podemos aplicar os principais paradigmas da ciência da computação e o como eles podem nos auxiliar na hora de escrevermos CSS.

188900fc4ed166ff159a9b74aa38a9bd?s=128

fernahh

November 27, 2016
Tweet

Transcript

  1. CSS COMPUTER STYLE SCIENCE fernahh.com.br . { }

  2. @fernahh fernahh.com.br

  3. ContaAzul contaazul.com

  4. None
  5. why?

  6. Antes de tudo, essa não é mais uma palestra sobre

    SMACSS, BEM ou DRYCSS.
  7. Motivação O CSS e seu ecossistema sempre foram distantes da

    computação.
  8. linguagem

  9. linguagem comunidade

  10. linguagem comunidade design

  11. a linguagem.

  12. 1959 FLOW-MATIC Primeira linguagem de programação semelhante ao idioma inglês

    (build for humans).
  13. Grace Murray Hopper

  14. Grace Murray Hopper - Criou o primeiro compilador

  15. Grace Murray Hopper - Criou o primeiro compilador - Desenvolveu

    a Flow-Matic
  16. Grace Murray Hopper - Criou o primeiro compilador - Desenvolveu

    a Flow-Matic - Criou o termo “bug”
  17. 1959 C Linguagem imperativa e procedural. Foi criada para o

    desenvolvimento do Unix. 1972
  18. 1959 SmallTalk É considerada a primeira linguagem orientada objetos. Foi

    um marco para sua época. 1972 1980
  19. 1959 ...CSS 1972 1980 1996

  20. 1959 ...CSS 1972 1980 1996 ~ 4 décadas!

  21. “Designing simple style sheets is easy. One needs only to

    know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say: H1 { color: blue }; The example is a simple CSS rule”
  22. “Designing simple style sheets is easy. One needs only to

    know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say: H1 { color: blue }; The example is a simple CSS rule”
  23. A simplicidade do CSS foi decisiva para o seu sucesso.

  24. a comunidade.

  25. Designers Em 2013, representavam ~16,8% dos profissionais que trabalhavam com

    web no Brasil.
  26. Comunidade jovem ~76% dos profissionais tem menos de 30 anos,

    sendo que quase metade tem menos de 25 anos!
  27. Experiência back-end Apenas ~23% tem back-end como atuação principal juntamente

    com front-end. http://tableless.com.br/resultados-do-survey-2015/
  28. Fragmentação Além de já ser uma comunidade bastante específica, estamos

    nos dividindo entre “ui developers” e “javascript developers”.
  29. o design.

  30. O piloto. Graças a evolução do design que o CSS

    evoluiu. As features do CSS3 vieram de demandas do design.
  31. linguagem comunidade design

  32. linguagem comunidade design javascript

  33. HTML

  34. HTML CSS

  35. HTML CSS JavaScript

  36. JavaScript CSS HTML

  37. O JavaScript se tornou o principal pilar da web. Além

    de comportamento, ele entrega conteúdo e (algumas vezes) é responsável pelo estilo de uma página web.
  38. O mercado mudou. A web agora é uma ótima plataforma

    para aplicações complexas.
  39. Documentos Grupo de páginas que seguem o mesmo padrão de

    comportamento e estilo.
  40. /home

  41. /home /products

  42. /home /products /product/1

  43. Aplicações Ao invés de várias páginas, geralmente é apenas uma

    com estados diferentes.
  44. /signup

  45. /signup /step/1

  46. /signup /step/1 /step/2

  47. A ciência. Aprender boas práticas e paradigmas nos ajudam a

    evitar cenários caóticos.
  48. paradigmas != metodologias (BEM, SMACSS, DRYCSS, …)

  49. Apesar de ser uma linguagem declarativa, CSS também pode atender

    a outros paradigmas computacionais.
  50. Paradigma Imperativo Baseado em uma sequência de comandos que determinam

    como o computador vai executar uma tarefa.
  51. Uma das principais características do paradigma imperativo é a sua

    relação com linguagens procedurais.
  52. html { font-family: sans-serif; line-height: 1.15; } body { margin:

    0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; }
  53. html { font-family: sans-serif; line-height: 1.15; } body { margin:

    0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; }
  54. html { font-family: sans-serif; line-height: 1.15; } body { margin:

    0; } article, aside, footer, header, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } normalize.css 461 linhas. (com comentários)
  55. /* ========================== Section comment block ========================== */ /* Sub-section comment

    block ========================== */ /** * Short description using * Doxygen-style comment format * * The first sentence of the long * description starts here and * continues on this * line for a while finally concluding * here at the end of this paragraph. * */ /* Basic comment */ idiomatic-css https://github.com/necolas/idiomatic-css
  56. Outra característica forte do paradigma imperativo é permitir que o

    desenvolvedor controle o fluxo de execução.
  57. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  58. body { color: green; } Lorem ipsum dolor sit amet,

    consectetur adipisicing elit.
  59. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Brand

  60. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Brand header

    { color: white !important; }
  61. Caos! CSS sempre foi conhecido por ser difícil de escalar

    e dar manutenção.
  62. Além do caos e todos, vieram piadas que já perderam

    graça há mais de 5 anos…
  63. Além do caos e todos, vieram piadas que já perderam

    graça há mais de 5 anos…
  64. DRY Cada parte de um sistema deve ter uma representação

    única e livre de ambiguidades.
  65. representação única.

  66. .Header { background: #ffffff; } .Article { background: #ffffff; }

    .Footer { background: #ffffff; }
  67. .Header { background: #ffffff; } .Article { background: #ffffff; }

    .Footer { background: #ffffff; }
  68. .Header { background: #ffffff; } .Article { background: #ffffff; }

    .Footer { background: #ffffff; } .Header, .Article, .Footer { background: #ffffff; }
  69. livre de ambiguidades.

  70. .b { } botão?

  71. botão? bold? .b { }

  72. botão? bold? “uma bola” .b { }

  73. Metodologias de escrita como SMACSS e BEM buscam resolver problemas

    com seletores ambíguos.
  74. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger {

    /*...*/ } BEM Block. Element. Modifier.
  75. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger {

    /*...*/ } BEM Block. Element. Modifier. bloco
  76. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger {

    /*...*/ } BEM Block. Element. Modifier. elemento
  77. .Button { /*...*/ } .Button__Anchor_icon { /*...*/ } .Button--danger {

    /*...*/ } BEM Block. Element. Modifier. modificador
  78. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black {

    /*...*/ } SMACSS Scalable and Modular Architecture for CSS.
  79. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black {

    /*...*/ } SMACSS Scalable and Modular Architecture for CSS. módulo
  80. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black {

    /*...*/ } SMACSS Scalable and Modular Architecture for CSS. estado
  81. .comment-box { /*...*/ } .comment-box.is-open { /*...*/ } .button-black {

    /*...*/ } SMACSS Scalable and Modular Architecture for CSS. tema
  82. Metodologias tiveram um papel importante na evolução de como escrevemos

    CSS, mas elas são facilmente violáveis.
  83. A era dos pré-processadores. Less, Sass e Stylus foram decisivos

    para a evolução da web e do CSS.
  84. Variáveis. Exemplo no SCSS. $bgColor: #ffffff; .Header { background: $bgColor;

    } .Article { background: $bgColor; } .Footer { background: $bgColor; }
  85. :root { --bgColor: #ffffff; } .Header { background: var(--bgColor); }

    .Article { background: var(--bgColor); } .Footer { background: var(--bgColor); } Custom Properties. “Variáveis” nativas do CSS.
  86. .Notification--warning { font-size: 2em; font-weight: bold; } .Notification--danger { font-size:

    2em; font-weight: bold; } .Notification--success { font-size: 2em; font-weight: bold; }
  87. .Notification--warning { font-size: 2em; font-weight: bold; } .Notification--danger { font-size:

    2em; font-weight: bold; } .Notification--success { font-size: 2em; font-weight: bold; }
  88. @mixin notification { font-size: 2em; font-weight: bold; }; .Notification--warning {

    @extend notification(); } .Article { @extend notification(); } .Footer { @extend notification(); } Mixins. Exemplo no SCSS.
  89. :root { --notification: { font-size: 2em; font-weight: bold; }; }

    .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } @apply rule. “Mixin” nativo do CSS.
  90. :root { --notification: { font-size: 2em; font-weight: bold; }; }

    .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } @apply rule. “Mixin” nativo do CSS. custom property
  91. Apesar de úteis, os pré-processadores possuem um problema que vários

    softwares tiveram: estrutura monolítica.
  92. monolito

  93. monolito microserviços

  94. Além de problemas de escalabilidade, estruturas monolíticas exigem um grande

    conhecimento da base de código.
  95. A era dos pós-processadores. Pós-processar o CSS nos permite contribuir

    com a evolução da comunidade.
  96. PostCSS

  97. PostCSS linter

  98. PostCSS linter autoprefixer

  99. PostCSS linter autoprefixer transpiler

  100. PostCSS linter autoprefixer transpiler .{ }

  101. PostCSS linter autoprefixer transpiler .{ }

  102. PostCSS linter autoprefixer transpiler .{ }

  103. PostCSS é a crista da onda. Possui mais de 200

    plugins, é bem aceito pela comunidade e future proof!
  104. A era pós CSS3. A evolução das specs CSS estão

    rápidas e próximas dos approaches.
  105. Orientação a Objetos Possui classes que definem objetos de um

    sistema. Cada uma dessas especifica o comportamento e estados de seus objetos e o relacionamento com outros objetos.
  106. OOCSS foi importante para a sua época. Porém, desde 2011

    não há mais atualizações em sua especificação.
  107. O paradigma de Orientação a Objetos não se limita a

    implementação sugerida pelo OOCSS.
  108. S.O.L.I.D. Cada letra representa um princípio da Orientação a Objetos

    que nos ajuda a manter um código saudável.
  109. Single Responsibility Principle: diz que todas nossas abstrações devem ter

    uma única responsabilidade.
  110. .Button--disabled { display: flex; max-width: 320em; background: red; }

  111. .Button--disabled { display: flex; max-width: 320em; background: red; } box-model

  112. .Button--disabled { display: flex; max-width: 320em; background: red; } estilo

  113. .Button { display: flex; max-width: 320em; } .Button--disabled { display:

    flex; max-width: 320em; background: red; } box-model
  114. .Button { display: flex; max-width: 320em; } .Danger { background:

    red; } .Button--disabled { display: flex; max-width: 320em; background: red; } estilos
  115. Open Closed Principle: quando você tem uma abstração, ao invés

    de modificá-la, permita que ela possa ser estendida ou usada para compor algo.
  116. Se uma abstração não é sua, não modifique-a!

  117. Muitos projetos ainda usam Bootstrap v2.x por conta das “personalizações”

    nos componentes do framework.
  118. O @extend do Sass foi um grande vilão de projetos

    que estendem classes de frameworks CSS.
  119. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    }
  120. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    }
  121. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    } .btn, .btn-login { display: block; /*...*/ }
  122. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    } .header .btn { background: red; /*...*/ }
  123. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    }; .header .btn { background: red; /*...*/ };
  124. .btn { display: block; /*...*/ }; .btn-login { @extend .btn;

    } .header .btn { background: red; /*...*/ }
  125. .btn { display: block; /*...*/ } .btn-login { @extend .btn;

    } .header .btn { background: red; /*...*/ } .btn, .btn-login { display: block; /*...*/ } .header .btn, .header .btn-login { background: red; /*...*/ }
  126. Dica de ouro: se for usar @extend no Sass, evite

    usar classes, vá de placeholders.
  127. Herança. Usada para reaproveitamento de código. A ideia é simples:

    objetos compartilharem propriedades.
  128. :root { --notification: { font-size: 2em; font-weight: bold; }; }

    .Notification--warning { @apply --notification; } .Article { @apply --notification; } .Footer { @apply --notification; } herança com @apply rule.
  129. É importante utilizar herança para melhorar a expressividade de seu

    código.
  130. .Card::before { content: ''; /*...*/ }

  131. .Card::before { content: ''; /*...*/ }

  132. :root { --fold: { /*...*/ } } .Card::before { @apply

    --fold; }
  133. :root { --fold: { /*...*/ } } .Card::before { @apply

    --fold; } Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  134. Lembre-se: custom properties funcionam da mesma forma que as outras,

    ou seja, são manipuladas pelo efeito cascata.
  135. Programação Funcional É inspirado em funções matemáticas, ou seja, dado

    uma entrada você terá sempre a mesma saída. O paradigma funcional busca manter qualquer valor imutável.
  136. Composição: Assim como você compõe pequenas funções, você pode compor

    pequenas classes.
  137. “O melhor approach para escrever CSS é escrever o menos

    CSS possível.”
  138. EXCLUIR

  139. <button class="Button--danger"></button> EXCLUIR

  140. <button class="Button--danger"></button> EXCLUIR

  141. <button class="Button--danger"></button> <button class="bg-red white rounded"></button> EXCLUIR

  142. O caso .size-flex.

  143. Precisávamos de uma classe que colocasse 100% de largura em

    botões. But, não tínhamos botões flexíveis componentizado...
  144. None
  145. None
  146. Hoje essa classe é usada em 58 arquivos HTML, e

    aparece 110 vezes.
  147. Classes enxutas são amor, deixei seu preconceito de lado.

  148. Imutabilidade: nos dá uma das coisas mais difíceis de se

    ter em CSS: confiança de que o que você escrever é o que vai ser renderizado.
  149. .no-text-transform { text-transform: none !important; } .no-padding-bottom { padding-bottom: 0

    !important; } .no-padding-top { padding-top: 0 !important; } Uma das formas de garantirmos a imutabilidade de uma classe é usando !important.
  150. immutablecss.com

  151. tachyons.io

  152. funkcss.com

  153. Além de evitar o problema com especificidade, CSS funcional te

    faz pensar melhor em componentes.
  154. CSS Funcional é legal pela simplicidade.

  155. Orientação a Objetos faz sentido em ambientes extremamente controlados.

  156. Escolha uma abordagem em que você escreva cada vez menos

    CSS.
  157. Mantenha sua stack simples e plugável.

  158. Busque sempre estudar paradigmas.

  159. Exclua CSS, isso evita que seu código apodreça.

  160. O CSS pode ser seu melhor amigo. Faça projetos incríveis.

  161. obrigado! @fernahh fernahh.com.br