Diciamoci la verità, il CSS è facile e alla portata di tutti. Ma nonostante questo molti sviluppatori vedono CSS come un male necessario. Tra chi lo odia e lo evita come la peste, chi cerca di fixarlo e lo inserisce in Javascript, chi aspetta e brama qualche tool di disegno che esporti CSS utilizzabile. Ma c'è tra di noi chi il CSS lo ama, ma se ne vergogna amaramente. Usciamo fuori dall'ombra e facciamo vedere davvero cosa vuol dire scrivere CSS nel mondo del lavoro moderno. Perché alla fine che mondo sarebbe senza colori?

1. CSS: Figli di un
dio minore
Davide Di Pumpo
Faenza 2017

2. Chi sono?
Davide Di Pumpo
Senior Front End Developer
Coorganizzatore
maintainer
MakhBeth on
Mi piacciono: gatti, fumetti, videogiochi e le cravatte
@Credimi
Milano Front End Meetup
Super GiGi
Twitter GitHub Internet

3. LET'S START MEOW!

4. Prima però
Devo parlarvi un po' di me

5. Quando sono nato

6. Cosa volevo fare?
IL WEB
DESIGNER
* Il dentista

7. Cosa ho fatto
Informatica
Graphic Design
Programmatore Flash
Grafico Pubblicitario
Front End Developer
UI Designer
(Nel mentre ho sempre fatto siti web)

8. Per due anni
Ho fatto praticamente il
CSSsista

9. Perché vi racconto questo?
È una storia

10. Una storia che ci
accomuna un po' tutti

12. Il web è una
miniera d'oro
(almost)

13. E come per il far west, ci siamo
trovati di tutto alla frontiera
Designer
Developer
IT
Addetti marketing
Web master
Scappati di casa
Che è un bene eh, il Web è bello anche perché è eterogeneo

14. Designer VS Developer

15. Ma com'è il rapporto tra un
CSSista e gli altri?

16. Testimonianze

19. Stai sul ***** a
TUTTI

21. Nessuno ti ama

23. IL CSS FA
SCHIFO

24. Seriamente
Quanti di voi scrivono CSS? Escludendo:
CSS Modules, Style component …
Sass, Less, PostCSS …
Bootstrap (brrr), Foundation …

25. React: CSS in JS by vjeux

26. E per un designer:

27. CSS NEMMENO RICONOSCE GLI ERRORI

28. Sapete cosa
mi ricorda?

29. Javascript nel
2008 tipo

31. Ma Javascript ha ottenuto
il giusto rispetto

32. Attraverso:
Educazione
Testing
Preprocessor & Tools
Convenzioni
Non includendo jQuery ovunque

33. Educazione
O come evitare le bad practice

34. Magic number
un numero o una stringa ripetuta più volte nel codice
sorgente di un programma a cui non è attribuito un
significato esplicito. Questo uso del termine è prettamente
dispregiativo
Wikipedia

35. Il CSS è pieno di numeri e misure
Che spesso inseriamo a caso

38. Vogliamo parlare della line-
height?

40. Come risolvere?
Passate al funzionale

41. .my-column {
@include color('primary');
@include font-size('huge');
@include grid-column(12);
@include space('margin-top', 2);
}

42. Ci sono già un sacco di risorse là fuori
- A meaningful web typography starter kit
- Flex Sass Grid Generator
- A visual guide
Intro to the 8-Point Grid System
Font metrics, line-height and vertical-align
Why vertical rhythms
Truly Fluid Typography With vh And vw Units
Modular scale calculator
Gutenberg
Super GiGi
Sass color functions

43. Testing
No seriamente, non sto scherzando

44. Dovete testare
la vostra roba!

45. Se già fate unit test
it('some css property', function () {
expect(el.css('display')).to.eq('block');
});

46. Ma si può andare oltre

47. @include test-module('Utilities') {
@include test('Font Size [mixin]') {
@include assert('Outputs a font size and line height based on keyword.'
@include input {
@include font-size(large);
}
@include expect {
font-size: 2rem;
line-height: 3rem;
}
}
}
}

48. Regression, baby

49. Tool
Su questo siamo messi
bene, dai

50. Non credo ci sia bisogno di
presentare:
Sass
Less
PostCSS
CSS in JS
Ecc…

51. Ecco, nel caso non li conosciate, magari dateci un occhio.
Pure ora da cellulare, vi perdono.

52. Convenzioni
No, non parlo di sconti se
siete affiliati LIDL

53. E se ti dicesasi
Che anche quanti spazi metti conta?

54. Le convenzioni sono
importanti
Rafforza le Best Practice
Aumenta la manutenibilità
E' più professionale

55. Come?
Linter baby

57. Link
Style Lint
Scss Lint
CSS Lint

58. Stop importing
jQuery
everywhere

59. Ecco, la stessa
cosa per
Bootstrap

60. Link
Video
Slide

61. Quindi?

62. Il css deve essere facile da capire, per supportare tutta la
gente che si avvicina al web.

63. Ma il CSS non ha bisogno
della vostra pietà!

64. Ma io già faccio tutto questo e,
nonostante tutto, nessuno vuole
giocare con me!

66. Thank you