Come Javascript ha cambiato il CSS

Come Javascript ha cambiato il CSS

Le nostre applicazioni diventano sempre più Javascript centriche. Dai build tool ai template engine, dai server agli static site generator. Anche il CSS non è stato risparmiato da questa rivoluzione di paradigmi. Vedremo insieme come tool come i CSS modules, gli styled-components e node possono rendere il nostro CSS migliore

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

March 15, 2018
Tweet

Transcript

  1. Come JavaScript ha CAMBIATO CAMBIATO IL CSS IL CSS Davide

    Di Pumpo
  2. None
  3. LET'S START MEAOW LET'S START MEAOW

  4. Parte 1 IL PASSATO IL PASSATO

  5. Disclaimer: family guy css gif is in there for satirical

    purposes, I actually love css in each of its forms
  6. <style type="text/javascript"> tags.H1.color = "red"; tags.p.fontSize = "20pt"; with (tags.H3)

    { color = "green"; } </style>
  7. None
  8. GRAZIE A SASS ABBIAMO AVUTO: GRAZIE A SASS ABBIAMO AVUTO:

    Le variabili Le funzioni I mixin
  9. None
  10. None
  11. CON SASS ERAVAMO DIPENDENTI DA RUBY CON SASS ERAVAMO DIPENDENTI

    DA RUBY
  12. None
  13. POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI POI, UNA NOTTE

    DI SETTEMBRE MI SVEGLIAI Era maggio 2009, ma volevo fare la citazione
  14. None
  15. reference

  16. Così importante che Sass lo hanno riscritto in Dart

  17. il che ci porta a...

  18. Parte 2 IL PRESENTE IL PRESENTE

  19. Any application that can be written in JavaScript, will eventually

    be written in JavaScript. ATWOOD'S LAW ATWOOD'S LAW
  20. No, non sto parlando di CSS in JS Lo faremo

    presto
  21. La vera domanda è, perchè ho bisogno di JS per

    scrivere del CSS?
  22. PER RISOLVERCI QUALCHE PER RISOLVERCI QUALCHE PROBLEMA PROBLEMA

  23. Problema: SCOPING SCOPING

  24. .title { color: red; } .title { color: green; }

    .title { color: blue; }
  25. Lo abbiamo risolto con: BEM, SMACSS, ECC... ECC... BEM, SMACSS,

    ECC... ECC...
  26. GENTLEMEN'S GENTLEMEN'S AGREEMENT AGREEMENT

  27. None
  28. ├── Accordion │ ├── Accordion.html │ └── Accordion.module.css ├── BadgeStep

    │ ├── BadgeStep.html │ └── BadgeStep.module.css └── BlogPosts ├── BlogPosts.html └── BlogPosts.module.css
  29. /* Accordion.module.css */ .title { color: green; } /* BadgeStep.module.css

    */ .title { color: green; } /* BlogPosts.module.css */ .title { color: green; }
  30. None
  31. /* Accordion.css */ .Accordion--title--axYow2l { color: gr /* BadgeStep.css */

    .BadgeStep--title--9scas2 { color: gre /* BlogPosts.css */ .BlogPosts--title--Fsvloa { color: gre
  32. html js pug <h1 css-module="title">postcss-modules</h1> import styles from "./component.module.css"; element.innerHTML

    = `<div class="${style.title}">postcss-modules</div>`; h1(class=css.title) postcss-modules
  33. .

  34. No global scope Niente conflitti Dipendenze esplicite

  35. Local styling with CSS Modules - Hugo Giraudel @ From

    the Fron…
  36. E I WEB E I WEB COMPONENTS? COMPONENTS? Aspettiamo Max

    tra qualche decina di minuti
  37. Problema: CONDIVIDERE CONDIVIDERE Tipo tra Sass e JS

  38. $breakpoints: ( small: 640, medium: 720, large: 1024 );

  39. COME ACCEDERE A QUESTE PROPERTY COME ACCEDERE A QUESTE PROPERTY

    NEL DOM? NEL DOM? Non renderizzare intere porzioni di codice Utilizzare element query Far partire o meno chiamate ajax
  40. $breakpoints: ( small: 640, medium: 720, large: 1024 );

  41. Come condividerei questo in JS?

  42. export default { small: 640, medium: 720, large: 1024 }

  43. import breakpoints from "./breakpoints.js"

  44. E probabilmente il nostro compilatore Sass viene lanciato da JS

    (Gulp, Webpack, whatelse)
  45. None
  46. import breakpoints from "./design/breakpoints" /*...*/ loader: "sass-loader", options: { data:

    `$breakpoints: ${breakpoints}` }
  47. None
  48. import breakpoints from "./design/breakpoints" import flattenObjSass from "js-to-scss" /*...*/ loader:

    "sass-loader", options: { data: `$breakpoints: ${flattenObjSass(breakpoints)}` }
  49. None
  50. Ad esempio, se volessi condividere quanto accade in un foglio

    Sass con un altro foglio Sass?
  51. 'env-map($env-sass-map-name, $map: ())': function (envSassMapName, map) { if (!env.sass[envSassMapName.getValue()]) {

    env.sass[envSassMapName.getValue()] = new nodeSass.types.Map(0); } if (map.getLength()) { env.sass[envSassMapName.getValue()] = map; }
  52. E CON ALTRI E CON ALTRI PROCESSORI CSS? PROCESSORI CSS?

    macropodhq/postcss-constants
  53. OK, UN GATTINO PER RIAVERE L'ATTENZIONE: OK, UN GATTINO PER

    RIAVERE L'ATTENZIONE:
  54. Problema: CONDIVIDERE A RUNTIME CONDIVIDERE A RUNTIME

  55. Aggiornare il CSS tramite JS

  56. Element.style.left = "42px";

  57. ANCORA PIÙ FACILE GRAZIE ALLE ANCORA PIÙ FACILE GRAZIE ALLE

    CUSTOM PROPERTIES CUSTOM PROPERTIES aka CSS variables
  58. Element.style.setProperty( `--custom`, '42px' )

  59. HOVER ME E D I T O N HTML CSS

    JS Result
  60. None
  61. None
  62. Problema: CODICE RIPETUTO CODICE RIPETUTO

  63. .square { height: 10px; width: 10px; }

  64. // Sass .square { @include square(10px); }

  65. // PostCSS .square { @mixin square 10px; } .square2 {

    size: 10px; }
  66. module.exports = (mixinNode, value) => { return { width: value,

    height: value, } };
  67. Una domanda sorge spontanea PERCHÉ POSTCSS? PERCHÉ POSTCSS? e non

    uno degli altri?
  68. TEST TEST

  69. import size from '../src/mixins/size.js'; test('Should return CSS rules', () =>

    { expect(size(null, '64px')).toEqual({ width: '64px', height: '64px', }) });
  70. Sandrina Pereira: How can Javascript improve your CSS mixins |

  71. ANCHE SASS È TESTABILE: ANCHE SASS È TESTABILE: TRUE TRUE

  72. @include test-module('Zip [function]') { @include test('Zips multiple lists int //

    Assert the expected results @include assert-equal( zip(a b c, 1 2 3), (a 1, b 2, c 3)); }
  73. Problema: COMPONENTIZZARE COMPONENTIZZARE

  74. None
  75. <a href="#" class="btn btn-primary"> Accattatil </a>

  76. None
  77. <Button primary> Accattatil </Button>

  78. const Button = styled.button` background: ${props => props.primary ? 'palevioletred'

    : 'white' }; color: ${props => props.primary ? 'white' : 'palevi font-size: 1em; margin: 1em; padding: 0.25em 1em; b d 2 lid l i l d
  79. Una domanda sorge spontanea PERCHÉ NON LE PERCHÉ NON LE

    CLASSI? CLASSI? meno spontanea di prima
  80. Eliminano il global space Le dipendenze sono esplicite Condividere costanti

    è più facile
  81. MA PER ME IL SELLING POINT È... MA PER ME

    IL SELLING POINT È...
  82. suspense

  83. attesa

  84. momento verità

  85. None
  86. L'ASTRAZIONE L'ASTRAZIONE

  87. ??? ???

  88. None
  89. None
  90. Problema: REGRESSION TEST REGRESSION TEST

  91. COS'È? COS'È?

  92. None
  93. BACKSTOPJS BACKSTOPJS

  94. { "id": "OM Client", "viewports": [ {"label": "main", "width": 1366,

    "height": 768} ] { "label": "archive", "url": "https://localhost:9000/archive", "delay": 2000, "hideSelectors": ["#loading-bar-new"], "onBeforeScript": "helpers/localStorageOM.js" }
  95. module.exports = (chromy, scenario) => { chromy .wait('.ic-app') .click('.introjs-skipbutton'); };

  96. None
  97. Parte 3 IL FUTURO IL FUTURO

  98. WEB COMPONENTS WEB COMPONENTS

  99. PROJECT HOUDINI PROJECT HOUDINI

  100. None
  101. CSS PARSER API CSS PARSER API @apply o @extends a

    run time!
  102. CSS LAYOUT API CSS LAYOUT API

  103. None
  104. CSS PAINT API CSS PAINT API Per farla breve una

    sorta di Canvas
  105. .bubble { background: paint('circle'); }

  106. A riguardo

  107. Recap QUINDI? QUINDI?

  108. USIAMO DA ANNI TOOL PER USIAMO DA ANNI TOOL PER

    MIGLIORARE IL NOSTRO CSS MIGLIORARE IL NOSTRO CSS
  109. JS È GIÀ NELLA NOSTRA BUILD CHAIN, JS È GIÀ

    NELLA NOSTRA BUILD CHAIN, USIAMOLO A NOSTRO VANTAGGIO USIAMOLO A NOSTRO VANTAGGIO Per risolvere alcuni problemi che possiamo avere con CSS
  110. DAI RAGA, TUTTE STE DAI RAGA, TUTTE STE POSSIBILITÀ SONO

    UNA FIGATA POSSIBILITÀ SONO UNA FIGATA
  111. GRAZIE GRAZIE DAVIDE DI PUMPO DAVIDE DI PUMPO Technology -

    Co-organizer MakhBeth on: , , I like Cats, Drink, Comics and Videogames... Credimi Milano Frontend Twitter Github Internet