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

1. Come JavaScript ha
CAMBIATOCAMBIATO
IL CSSIL CSS Davide Di Pumpo

3. LET'S START MEAOWLET'S START MEAOW

4. Parte 1
IL PASSATOIL PASSATO

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 RUBYCON SASS ERAVAMO DIPENDENTI DA RUBY

13. POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAIPOI, 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 PRESENTEIL PRESENTE

19. Any application that can be written
in JavaScript, will eventually be
written in JavaScript.
ATWOOD'S LAWATWOOD'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 QUALCHEPER RISOLVERCI QUALCHE
PROBLEMAPROBLEMA

23. Problema:
SCOPINGSCOPING

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'SGENTLEMEN'S
AGREEMENTAGREEMENT

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 WEBE I WEB
COMPONENTS?COMPONENTS?
Aspettiamo Max tra qualche decina di
minuti

37. Problema:
CONDIVIDERECONDIVIDERE
Tipo tra Sass e JS

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

39. COME ACCEDERE A QUESTE PROPERTYCOME 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 ALTRIE 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 RUNTIMECONDIVIDERE A RUNTIME

55. Aggiornare il CSS tramite JS

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

57. ANCORA PIÙ FACILE GRAZIE ALLEANCORA PIÙ FACILE GRAZIE ALLE
CUSTOM PROPERTIESCUSTOM PROPERTIES
aka CSS variables

58. Element.style.setProperty(
`--custom`, '42px'
)

62. Problema:
CODICE RIPETUTOCODICE 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. TESTTEST

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: TRUETRUE

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:
COMPONENTIZZARECOMPONENTIZZARE

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 LEPERCHÉ 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'ASTRAZIONEL'ASTRAZIONE

87. ??????

90. Problema:
REGRESSION TESTREGRESSION TEST

91. COS'È?COS'È?

93. BACKSTOPJSBACKSTOPJS

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 FUTUROIL FUTURO

98. WEB COMPONENTSWEB COMPONENTS

99. PROJECT HOUDINIPROJECT HOUDINI

101. CSS PARSER APICSS PARSER API
@apply o @extends a run time!

102. CSS LAYOUT APICSS LAYOUT API

104. CSS PAINT APICSS 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 PERUSIAMO DA ANNI TOOL PER
MIGLIORARE IL NOSTRO CSSMIGLIORARE IL NOSTRO CSS

109. JS È GIÀ NELLA NOSTRA BUILD CHAIN,JS È GIÀ NELLA NOSTRA BUILD CHAIN,
USIAMOLO A NOSTRO VANTAGGIOUSIAMOLO A NOSTRO VANTAGGIO
Per risolvere alcuni problemi che possiamo
avere con CSS

110. DAI RAGA, TUTTE STEDAI RAGA, TUTTE STE
POSSIBILITÀ SONO UNA FIGATAPOSSIBILITÀ SONO UNA FIGATA

111. GRAZIEGRAZIE
DAVIDE DI PUMPODAVIDE DI PUMPO
Technology -
Co-organizer
MakhBeth on: , ,
I like Cats, Drink, Comics and
Videogames...
Credimi
Milano Frontend
Twitter Github
Internet