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

Transcript

1. Come JavaScript ha CAMBIATO CAMBIATO IL CSS IL CSS Davide Di Pumpo
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>
8. GRAZIE A SASS ABBIAMO AVUTO: GRAZIE A SASS ABBIAMO AVUTO: Le variabili Le funzioni I mixin
11. CON SASS ERAVAMO DIPENDENTI DA RUBY CON SASS ERAVAMO DIPENDENTI DA RUBY
13. POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI Era maggio 2009, ma volevo fare la citazione
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
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; }
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)
46. import breakpoints from "./design/breakpoints" /*...*/ loader: "sass-loader", options: { data: `$breakpoints: ${breakpoints}` }
48. import breakpoints from "./design/breakpoints" import flattenObjSass from "js-to-scss" /*...*/ loader: "sass-loader", options: { data: `$breakpoints: ${flattenObjSass(breakpoints)}` }
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
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
75. <a href="#" class="btn btn-primary"> Accattatil </a>
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à
86. L'ASTRAZIONE L'ASTRAZIONE
87. ??? ???
90. Problema: REGRESSION TEST REGRESSION TEST
91. COS'È? COS'È?
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'); };
97. Parte 3 IL FUTURO IL FUTURO
98. WEB COMPONENTS WEB COMPONENTS
99. PROJECT HOUDINI PROJECT HOUDINI
101. CSS PARSER API CSS PARSER API @apply o @extends a run time!
102. CSS LAYOUT API CSS LAYOUT API
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