Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS figli di un dio minore

CSS figli di un dio minore

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?

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

March 17, 2017
Tweet

More Decks by Davide Di Pumpo

Other Decks in Design

Transcript

  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

  11. None
  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

  17. None
  18. None
  19. Stai sul ***** a TUTTI

  20. None
  21. Nessuno ti ama

  22. None
  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

  30. None
  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
  36. None
  37. None
  38. Vogliamo parlare della line- height?

  39. None
  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

  56. None
  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!
  65. None
  66. Thank you