Let There Be Peace On CSS

by Cristiano Rastelli

Slide 1

Slide 1 text

Cristiano Rastelli – Front End London / 31 Aug 2017 Let There Be Peace on CSS

Slide 2

Slide 2 text

Cristiano Rastelli Front-End Designer & Developer didoo.net / @areaweb

Slide 3

Slide 3 text

badoo.com

Slide 4

Slide 4 text

badoo.com

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

PROLOGUE A story

Slide 7

Slide 7 text

I am going to tell you a story. A story of war and –hopefully– peace. It’s a war of words, so I won’t use mine, but those of the protagonists.

Slide 8

Slide 8 text

CHAPTER ONE The War

Slide 9

Slide 9 text

War?  What war?

Slide 10

Slide 10 text

The War Declaration CHAPTER ONE - THE WAR

Slide 11

Slide 11 text

https://speakerdeck.com/vjeux/react-css-in-js Christopher “Vjeux” Chedeau - React: CSS in JS, 2014

Slide 12

Slide 12 text

The Battle CHAPTER ONE - THE WAR

Slide 13

Slide 13 text

http://www.zeldman.com/2016/01/05/13913/ Jeﬀrey Zeldman - Of Patterns and Power: Web Standards Then & Now

Slide 14

Slide 14 text

https://twitter.com/LeaVerou/status/686651368736698370

Slide 15

Slide 15 text

https://twitter.com/AaronGustafson/status/743073596789133312

Slide 16

Slide 16 text

https://twitter.com/Real_CSS_Tricks/status/754045216449933312

Slide 17

Slide 17 text

https://medium.learnreact.com/scale-fud-and-style-components-c0ce87ec9772

Slide 18

Slide 18 text

https://medium.com/@bitwiselover/functional-css-with-special-characters-643f25d653c7

Slide 19

Slide 19 text

https://twitter.com/mezzoblue/status/794419442272714752

Slide 20

Slide 20 text

https://twitter.com/snuggsi/status/820614541931376640

Slide 21

Slide 21 text

https://twitter.com/mholzschlag/status/820703602096283648

Slide 22

Slide 22 text

https://twitter.com/thomasfuchs/status/810885087214637057

Slide 23

Slide 23 text

https://twitter.com/BenLesh/status/812092408519413761

Slide 24

Slide 24 text

https://twitter.com/ReactiveConf/status/823239310552002560

Slide 25

Slide 25 text

https://twitter.com/thierrykoblentz/status/823584827169349632

Slide 26

Slide 26 text

https://twitter.com/zeldman/status/816343871491870721

Slide 27

Slide 27 text

https://twitter.com/thejameskyle/status/824790686822129665

Slide 28

Slide 28 text

https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS IS BROKEN

Slide 29

Slide 29 text

And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken - Sergio Zamarro

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

And it went on and on… https://medium.com/@zamarrowski/css-is-broken-5138773e17a5 CSS is Broken - Sergio Zamarro http://keithjgrant.com/posts/2017/03/css-is-not-broken/ CSS is Not Broken - Keith J. Grant https://medium.com/@shaunbent/css-sucks-9a4471ede74b CSS Sucks - Shaun Bent https://medium.com/@jdan/css-is-ﬁne-its-just-really-hard-638da7a3dce0 CSS is Fine, It’s Just Really Hard - Jordan Scales

Slide 33

Slide 33 text

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

The matter in dispute CHAPTER ONE - THE WAR

Slide 36

Slide 36 text

Separation of concerns CSS has inherent problems CSS global scope People use this tech because they don’t know CSS CSS doesn't scale and was never meant for that You’re breaking the web Excessive tooling Cascading and Inheritance

Slide 37

Slide 37 text

Been there, seen that CHAPTER ONE - THE WAR

Slide 38

Slide 38 text

CHAPTER ONE - THE WAR 2000-2005

Slide 39

Slide 39 text

https://en.wikipedia.org/wiki/Browser_wars The Browser Wars

Slide 40

Slide 40 text

https://en.wikipedia.org/wiki/Browser_wars The Browser Wars

Slide 41

Slide 41 text

http://www.digital-web.com/articles/separating_behavior_and_structure_2/ JS vs HTML I hope this will convince moderate anti-JavaScripters that JavaScript is on the move towards integration in accessible XHTML/CSS pages, and that there is  no fundamental reason to avoid it. Peter-Paul Koch - Separating behavior and structure

Slide 42

Slide 42 text

CHAPTER ONE - THE WAR 2006-2010

Slide 43

Slide 43 text

http://alistapart.com/article/behavioralseparation JS vs HTML - Part 2

Slide 44

Slide 44 text

https://www.ﬂexmonster.com/blog/blog-pivot-ﬂash-vs-html5/ Flash vs HTML

Slide 45

Slide 45 text

CHAPTER ONE - THE WAR 2011-2015

Slide 46

Slide 46 text

The 1st JavaScript War https://www.quora.com/What-makes-jQuery-win-the-JavaScript-libraries-wars-instead-of-Dojo-etc https://www.quora.com/Why-did-jQuery-win

Slide 47

Slide 47 text

https://twitter.com/Carnage4Life/status/238702428927700992 HTML5 vs Native

Slide 48

Slide 48 text

www.softﬁnity.com/blog/the-battle-of-modern-javascript-frameworks-conclusion-which-one-to-choose/ The 2nd JavaScript War ANGULAR.JS BACKBONE.JS

Slide 49

Slide 49 text

https://www.webdirections.org/blog/not-real-programming/ JS vs “Real Programming” There has been another, even longer running constant regarding the web for the last 20 years—working with web technologies is not “programming”, not “real coding”.

Slide 50

Slide 50 text

CHAPTER ONE - THE WAR 2015-2017

Slide 51

Slide 51 text

https://medium.com/tastejs-blog/yet-another-framework-syndrome-yafs-cf5f694ee070#.1x0cum4l7 Yet Another Framework Syndrome Almost every day, we see new libraries, frameworks and tools being released in the JavaScript community — many of which simply reinvent the wheel.

Slide 52

Slide 52 text

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.qhs31chdx The “tooling” bloat

Slide 53

Slide 53 text

Max Stoiber on stage (React London 2017 - Flickr) The Advent of React

Slide 54

Slide 54 text

INTERLUDE A plan

Slide 55

Slide 55 text

Recently I have started to ask myself why this war, what is causing it. I don’t want to take a position. I see good reasons and valid points on both “sides” of the contention.

Slide 56

Slide 56 text

What I want to do is to understand the reasons behind this war and do my part to stop it. Because if you understand the causes, you can try to find a solution, (or at least find a truce).

Slide 57

Slide 57 text

CHAPTER TWO The Peace

Slide 58

Slide 58 text

The Main Causes CHAPTER TWO - THE PEACE

Slide 59

Slide 59 text

https://markdalgleish.github.io/presentation-ﬁrst-class-styles/#11 Mark Dalgleish

Slide 60

Slide 60 text

https://twitter.com/oliverturner/status/900325985018667008 OLD GENERATION NEW GENERATION

Slide 61

Slide 61 text

https://en.wikipedia.org/wiki/Separation_of_concerns Separation of concerns, not necessarily of technologies

Slide 62

Slide 62 text

Separation of Concerns Separation of Concerns (only, from a different point of view) JS CSS HTML BUTTON DATE PICKER MODAL LIST LIST-ITEM MEDIA

Slide 63

Slide 63 text

My understanding CHAPTER TWO - THE PEACE

Slide 64

Slide 64 text

CSS is a “young” community "Standard" patterns and architectures started to appear, and developers somehow stopped to fight one against the other for the "best" JS framework to use. The world of the CSS development is undergoing a metamorphosis that the JavaScript world has seen a few years ago, when it was completely transformed by the appearance of web-based applications. JavaScript became a professional language, with its own dignity and business relevance.

Slide 65

Slide 65 text

CSS is a “young” community Nowadays you have “CSS developer” as a specific role in a team.  As a community we have started to discuss of CSS Architectures and how to use CSS in the specific context of web applications. So maybe we are simply a too young community in that sense, and we never had the necessary discussion about who we are and what we do. Well, maybe that's what is happening to CSS too.

Slide 66

Slide 66 text

https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals JavaScript Best Practices Global variables and function names are an incredibly bad idea. There are several workarounds to avoid using globals. “ ”

Slide 67

Slide 67 text

Non-partisans CHAPTER TWO - THE PEACE

Slide 68

Slide 68 text

https://twitter.com/mxstbr/status/755481795206971392 Max Stoiber - @mxstbr

Slide 69

Slide 69 text

https://twitter.com/markdalgleish/status/819289589911146496 Mark Dalgleish - @markdalgleish

Slide 70

Slide 70 text

http://evolution.berkeley.edu/evolibrary/article/evograms_07 Evolution is not linear

Slide 71

Slide 71 text

https://twitter.com/oliverturner/status/816392203568291840

Slide 72

Slide 72 text

https://twitter.com/StuRobson/status/757684093329039364 Stuart “Stu” Robson - @StuRobson

Slide 73

Slide 73 text

http://adamonishi.com/2016/06/how-to-make-a-chilli/ Adam Onishi - @onishiweb “How to make a Chilli”

Slide 74

Slide 74 text

https://benfrain.com/holier-than-thou/ Ben Frain - @benfrain Every few months somebody commits a cardinal sin of web development. They openly discuss or document a technology choice they have made that is contrary to the received wisdom of the ‘web community’. You know what happens next. Other web developers, brave behind their avatars (even those of great standing), use social media to pour scorn on said developer and denounce them for their practice/proclamation. “Holier Than Thou”

Slide 75

Slide 75 text

https://css-tricks.com/increasing-wariness-dogmatism/ Chris Coyier - @chriscoyier “My Increasing Wariness of Dogmatism” It's certainly wordier to avoid dogma when you're trying to make a point. But it's more honest. It's more clear. It's showing empathy for people out there doing things diﬀerent.  It makes it easier for others to empathize with you.

Slide 76

Slide 76 text

https://speakerdeck.com/michelebertoli/unlearn-everything Michele Bertoli - @michelebertoli “ Unlearn everything „

Slide 77

Slide 77 text

Berlin, Germany – https://2017.cssconf.eu/ CSS Conf EU 2017

Slide 78

Slide 78 text

https://www.youtube.com/watch?v=X_uTCnaRe94 Mark Dalgleish: A Unified Styling Language

Slide 79

Slide 79 text

https://www.youtube.com/watch?v=X_uTCnaRe94 Glen Maddern: The road to styled components

Slide 80

Slide 80 text

FINALE The End

Slide 81

Slide 81 text

Call for a truce FINALE - THE END

Slide 82

Slide 82 text

Embrace the ever changing nature of the web. Be careful with your words: they can hurt. Be pragmatic, non dogmatic. But most of all, be curious.

Slide 83

Slide 83 text

“The two most powerful warriors are patience and time.” – Leo Tolstoy

Slide 84

Slide 84 text

Cristiano Rastelli MOBILE WEB TEAM

Slide 85

Slide 85 text

Photo Credits All the photos used in this presentation are from the tv series “War & Peace”, broadcasted on BBC One in 2016. You can see the full photo-gallery here: http://www.bbc.co.uk/programmes/p039wcdk/galleries